Passer au contenu principal

Pages d'atterrissage

Les pages d'atterrissage sont une évolution de nos pages populaires « Vous y êtes presque ».

Pourquoi utiliser des pages d’atterrissage ?

Nous avons transformé ces pages pour qu'elles deviennent de puissantes opportunités de marque et de marketing pour vous et vos clients. Tous les modèles de page d'atterrissage sont optimisés pour l'image de marque et l'éducation avec diverses mises en page , une conception améliorée du QR code et la prise en charge des principaux médias.

Les pages d'atterrissage permettent à vos utilisateurs de vivre une expérience enrichissante, quel que soit l'appareil qu’ils utilisent. - Ils apparaissent sur des appareils qui ne sont pas autorisés ou capables d'accéder directement à l'expérience Web AR. Ils poursuivent également notre mission de rendre la RA accessible en aidant les utilisateurs à se rendre à la bonne destination pour s'engager dans la RA.

Nous avons conçu les pages d'atterrissage de manière à ce qu'il soit extrêmement facile pour les développeurs de personnaliser la page. Nous voulons que vous puissiez bénéficier d'une page d'atterrissage optimisée tout en vous permettant de consacrer votre temps à l'élaboration de votre expérience WebAR.

Les pages d'atterrissage s'adaptent intelligemment à votre configuration

chargement-exemples1

chargement-exemples2

Utilisez les pages d'atterrissage dans votre projet

  1. Ouvrez votre projet
  2. Ajoutez la balise suivante à head.html

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

Remarque : pour les projets auto-hébergés, vous devez ajouter la balise <script> à votre page :

<script src='https://cdn.8thwall.com/web/coaching-overlay/coaching-overlay.js'></script&gt ;

  1. Supprimez xrextras-almost-there de votre projet A-Frame, ou XRExtras.AlmostThere.pipelineModule() de votre projet Non-AFrame. (Les pages d'atterrissage comprennent , une logique presque réelle, en plus des mises à jour de la page du QR code)
  2. Si vous le souhaitez, vous pouvez personnaliser les paramètres de votre page d'atterrissage comme indiqué ci-dessous. Pour les projets Non-AFrame, veuillez vous référer à la documentation LandingPage.configure() .

Paramètres du composant A-Frame (tous facultatifs)

ParamètresTypeDéfautDescription
logoSrcChaîneSource d'image pour le logo de la marque.
logoAltChaînelogoTexte Alt pour l'image du logo de la marque.
préfixe de l'inviteChaînescannez ou visitezDéfinit la chaîne de texte de l'appel à l'action avant l'affichage de l'URL de l'expérience.
urlChaînelien 8th.io si 8th Wall est hébergé, ou page actuelleDéfinit l'URL et le QR code affichés.
suffixe de l'inviteChaînecontinuerDéfinit la chaîne de texte de l'appel à l'action après l'affichage de l'URL de l'expérience.
couleur du texteCouleur hexagonale'#ffffff'Couleur de tout le texte de la page d'atterrissage.
policeChaîne"'Nunito', sans-serif"Police de tous les textes de la page d'atterrissage. Ce paramètre accepte les arguments valides de CSS font-family.
ombrage du texteBooléenfauxDéfinit la propriété d'ombre du texte pour tout le texte de la page d'atterrissage.
backgroundSrcChaîneSource de l'image d'arrière-plan.
flou d'arrière-planNombre0Applique un effet de flou à l'arrière-plan backgroundSrc s'il est spécifié. (Les valeurs sont généralement comprises entre 0,0 et 1,0)
couleur de fondChaîne'linear-gradient(#464766,#2D2E43)'Couleur d'arrière-plan de la page d'atterrissage. Ce paramètre accepte les arguments de couleur d'arrière-plan CSS valides. La couleur d'arrière-plan n'est pas affichée si un background-src ou un sceneEnvMap est défini.
mediaSrcChaîneImage de couverture de l'application, le cas échéantSource média (modèle 3D, image ou vidéo) pour le contenu du héros de la page d'atterrissage. Les sources de média acceptées comprennent l'identifiant de l'élément d'actif ou l'URL statique.
mediaAltChaîne« Aperçu »Texte Alt pour le contenu de l'image de la page d'atterrissage.
mediaAutoplayBooléenvraiSi le média mediaSrc est une vidéo, spécifiez si la vidéo doit être lue au chargement avec le son coupé.
médiaAnimationChaînePremier clip d'animation du modèle, le cas échéantSi le mediaSrc est un modèle 3D, indiquez s'il faut jouer un clip d'animation spécifique associé au modèle ou "aucun".
mediaControlsChaîneminimalSi mediaSrc est une vidéo, spécifiez les contrôles médias affichés à l'utilisateur. Choisissez entre « aucun », « mininal » ou « navigateur » (navigateur par défaut)
sceneEnvMapChaînechampSource d'image pointant vers une image équirectangulaire. Ou l'un des environnements prédéfinis suivants : "champ", "colline", "ville", "pastel" ou "espace".
sceneOrbitIdleChaîne'spin' (rotation)Si le mediaSrc est un modèle 3D, indiquez si le modèle doit "tourner" ou "aucun".
sceneOrbitInteractionChaîne'drag'Si le mediaSrc `` est un modèle 3D, indiquez si l'utilisateur peut interagir avec les contrôles de l'orbite, choisissez « faire glisser » ou « aucun ».
sceneLightingIntensityNombre1Si le média mediaSrc est un modèle 3D, indiquez l'intensité de la lumière qui éclaire le mode.
vrPromptPrefixChaîneou visiteDéfinit la chaîne de texte de l'appel à l'action avant l'affichage de l'URL de l'expérience sur les casques VR.

Exemples

mise en page 3D avec des paramètres spécifiés par l'utilisateur

exemple de chargement

Exemple d'A-Frame avec URL externe (capture d'écran ci-dessus)

  landing-page="
mediaSrc : https://www.mydomain.com/helmet.glb ;
sceneEnvMap : hill"
xrextras-loading
xrextras-gesture-detector
...
xrweb>

Exemple de cadre A avec un actif local

<a-scene
xrextras-gesture-detector
landing-page="mediaSrc: #myModel"
xrextras-loading
xrextras-runtime-error
renderer="colorManagement: true"
xrweb>

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

Exemple sans cadre (capture d'écran ci-dessus)

// Configuré ici
LandingPage.configure({
mediaSrc : 'https://www.mydomain.com/bat.glb',
sceneEnvMap : 'hill',
})
XR8.addCameraPipelineModules([
XR8.GlTextureRenderer.pipelineModule(),
XR8.Threejs.pipelineModule(),
XR8.XrController.pipelineModule(),
XRExtras.FullWindowCanvas.pipelineModule(),
XRExtras.Loading.pipelineModule(),
XRExtras.RuntimeError.pipelineModule(),
// Ajouté ici
LandingPage.pipelineModule(),
...
])