Skip to main content

Landing Pages

Landing Pages are an evolution of our popular "Almost There" pages.

Why Use Landing Pages?

We have transformed these pages to become powerful branding and marketing opportunities for you and your clients. All Landing Page templates are optimized for branding and education with various layouts, an improved QR code design and support for key media.

Landing Pages ensure that your users have a meaningful experience no matter what device they are on. - They appear on devices that are not allowed or capable of accessing the Web AR experience directly. They also continue our mission of making AR accessible by helping users get to the right destination to engage with AR.

We designed Landing Pages in a manner which makes it extremely easy for developers to customize the page. We want you to benefit from an optimized Landing Page while still enabling you to spend your time on building your WebAR experience.

Landing Pages Intelligently Adapt To Your Configuration



Use Landing Pages in Your Project

  1. Open your Project
  2. Add the following tag to head.html

<meta name="8thwall:package" content="@8thwall.landing-page">

Note: For Self-Hosted projects, you would add the following <script> tag to your page instead:

<script src=''></script>

  1. Remove xrextras-almost-there from your A-Frame project, or XRExtras.AlmostThere.pipelineModule() from your Non-AFrame project. (Landing Pages include almost-there logic in addition to the updates to the QR code page.)
  2. Optionally, customize the parameters of your landing-page component as defined below. For Non-AFrame projects, please refer to the LandingPage.configure() documentation.

A-Frame component parameters (All Optional)

logoSrcStringImage source for brand logo image.
logoAltString'Logo'Alt text for brand logo image.
promptPrefixString'Scan or visit'Sets the text string for call to action before the URL for the experience is displayed. link if 8th Wall hosted, or current pageSets the displayed URL and QR code.
promptSuffixString'to continue'Sets the text string for call to action after the URL for the experience is displayed.
textColorHex Color'#ffffff'Color of all the text on the Landing Page.
fontString"'Nunito', sans-serif"Font of all text on the Landing Page. This parameter accepts valid CSS font-family arguments.
textShadowBooleanfalseSets text-shadow property for all text on the Landing Page.
backgroundSrcStringImage source for background image.
backgroundBlurNumber0Applies a blur effect to the backgroundSrc if one is specified. (Typically values are between 0.0 and 1.0)
backgroundColorString'linear-gradient(#464766,#2D2E43)'Background color of the Landing Page. This parameter accepts valid CSS background-color arguments. Background color is not displayed if a background-src or sceneEnvMap is set.
mediaSrcStringApp’s cover image, if presentMedia source (3D model, image, or video) for landing page hero content. Accepted media sources include a-asset-item id, or static URL.
mediaAltString'Preview'Alt text for landing page image content.
mediaAutoplayBooleantrueIf the mediaSrc is a video, specifies if the video should be played on load with sound muted.
mediaAnimationStringFirst animation clip of model, if presentIf the mediaSrc is a 3D model, specify whether to play a specific animation clip associated with the model, or "none".
mediaControlsString'minimal'If mediaSrc is a video, specify media controls displayed to to user. Choose from "none", "mininal" or "browser" (browser defaults)
sceneEnvMapString'field'Image source pointing to an equirectangular image. Or one of the following preset environments: "field", "hill", "city", "pastel", or "space".
sceneOrbitIdleString'spin'If the mediaSrc is a 3D model, specify whether the model should "spin", or "none".
sceneOrbitInteractionString'drag'If the mediaSrc is a 3D model, specify whether the user can interact with the orbit controls, choose "drag", or "none".
sceneLightingIntensityNumber1If the mediaSrc is a 3D model, specify the strength of the light illuminating the mode.
vrPromptPrefixString'or visit'Sets the text string for call to action before the URL for the experience is displayed on VR headsets.


3D Layout with user specified parameters


A-Frame Example with External URL (screenshot above)

sceneEnvMap: hill"

A-Frame Example with Local Asset

landing-page="mediaSrc: #myModel"
renderer="colorManagement: true"

<!-- We can define assets here to be loaded when A-Frame initializes -->
<a-asset-item id="myModel" src="assets/my-model.glb"></a-asset-item>

Non-AFrame Example (screenshot above)

// Configured here
mediaSrc: '',
sceneEnvMap: 'hill',
// Added here