Comment intégrer le visualiseur WebAR de Vectary dans Webflow

Le viewer web de Vectary vous aide à intégrer de la 3D et de l'AR sur votre site Webflow aussi facilement que si vous intégriez une vidéo YouTube. Webflow est un outil en ligne incroyable permettant aux designers et aux agences de créer leurs sites internet sans coder. Vous voulez savoir à quel point un viewer WebAR de Vectary s'intègre parfaitement sur un site Webflow ? Jetez un œil à notre page d'accueil.

Qu'est-ce que le WebAR ?

Le WebAR est une technologie qui permet aux visiteurs de profiter d'une expérience de réalité augmentée depuis le web, sans avoir à télécharger d'application externe. Le viewer WebAR de Vectary prend cela en charge sur iPhone comme sur Android.

Comment intégrer votre design 3D sur un site Webflow

1. Importez votre modèle 3D dans Vectary Studio ou créez votre modèle à partir de zéro.
2. Faites pivoter, déplacez ou zoomez sur le modèle 3D et définissez la vue. Utilisez des interactions et des animations. Le mode Preview montre ce que cela donnera dans le viewer WebAR.
3. Cliquez sur l'onglet Share et activez l'option de partage.
4. Copiez le code d'intégration.
5. Rendez-vous sur l'éditeur web Webflow. Cliquez sur l'icône « + » pour ajouter un élément d'intégration Embed. Vous le trouverez dans Components. Glissez et déposez l'élément Embed dans le conteneur.
6. Collez votre code Vectary Viewer dans l'éditeur de code de Webflow.
7. Une fois votre site publié, il apparaîtra exactement là où vous l'avez collé.

Exemple de viewer WebAR dans Webflow

Voici à quoi peut ressembler votre viewer.

Tester le code iframe WebAR

Pas le temps de générer votre code WebAR ? Testez cet iframe sur votre site web :<iframe src="https://app.vectary.com/p/6JUjnpxVLsmPmDGW0tpVSQ" frameborder="0" width="100%" height="480"></iframe>

Le viewer WebAR de Vectary peut être personnalisé avec diverses animations et comportements. Vous pouvez également concevoir une application web interactive sur mesure grâce à l'API du viewer. Imaginez une boutique en ligne où vos visiteurs peuvent choisir parmi plusieurs variantes de couleurs et de formes dans un seul et même viewer.

Comment apporter des modifications à votre viewer WebAR Vectary

Supposons que vous souhaitiez modifier la couleur, la vue ou la forme complète de votre modèle 3D. L'éditeur de Vectary fonctionne comme un CMS 3D/AR instantané pour votre viewer web :

1. Ouvrez votre projet 3D sur Vectary
2. Apportez vos modifications
3. Cliquez sur l'onglet Share, puis sur Syncronize changes - il n'est pas nécessaire de remplacer le code. Le viewer 3D sera automatiquement mis à jour sur tous vos sites.

Comment ajouter une icône AR à votre viewer dans Vectary

1. Accédez à Vectary Studio
2. Appuyez sur esc pour accéder aux paramètres de la scène
3. Cliquez sur Advanced settings et choisissez Augmented Reality. Vous pouvez personnaliser l'icône et sa position.

Notez que les interactions en AR ne sont pas disponibles pour le moment. Cependant, la preview AR peut présenter la variante de produit configurée par vos visiteurs dans le viewer 3D.