Intégrer sur un site web
Placez votre projet 3D interactif dans n'importe quel site qui accepte les iframes.
Qu'est-ce que l'intégration ?
L'intégration place votre projet i3Dify à l'intérieur d'un autre site. Les visiteurs utilisent votre projet sans quitter la page.
- Votre projet s'affiche dans la mise en page du site
- Les visiteurs peuvent le faire glisser, zoomer et cliquer, comme sur sa propre page
- Pas de nouvel onglet ni de fenêtre pop-up
- Fonctionne sur tout site qui accepte les iframes
Obtenir le code d'intégration
- Ouvrez votre projet dans l'éditeur
- Allez dans l'onglet Partager
- Réglez la visibilité sur Non répertorié ou Public, et enregistrez le projet
- Ouvrez la section Code d'intégration
- Cliquez sur Copier le code d'intégration
- Collez le code dans votre site
Comprendre le code
Le code copié ressemble à ceci :
<iframe src="https://i3dify.com/view/your-project-id" width="100%" height="600" frameborder="0" allowfullscreen></iframe>
src: L'adresse de votre projet
width: La largeur de l'intégration, en pixels ou en pourcentage
height: La hauteur, en pixels
frameborder: Supprime la bordure par défaut de l'iframe
allowfullscreen: Permet aux visiteurs de passer en plein écran
Ajuster la taille
Adaptez la taille à votre site :
Pleine largeur
Avec width="100%", l'intégration remplit son conteneur :
<iframe src="..." width="100%" height="600" frameborder="0" allowfullscreen></iframe>
Taille fixe
Utilisez des valeurs en pixels pour une taille exacte :
<iframe src="..." width="800" height="600" frameborder="0" allowfullscreen></iframe>
Garder des proportions
Pour garder des proportions comme 16:9 à n'importe quelle largeur, placez l'iframe dans un conteneur :
<div style="position: relative; padding-bottom: 56.25%; height: 0;">
<iframe
src="..."
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
allowfullscreen
></iframe>
</div>Guides par plateforme
WordPress
- Modifiez votre page ou votre article
- Ajoutez un bloc HTML personnalisé
- Collez le code d'intégration
- Prévisualisez et publiez
Wix
- Ouvrez l'éditeur
- Cliquez sur Ajouter (+), puis Intégrer, puis Intégrations personnalisées, puis Intégrer un widget
- Collez le code d'intégration
- Redimensionnez si besoin
Squarespace
- Modifiez votre page
- Ajoutez un bloc Code
- Collez le code d'intégration
- Enregistrez et prévisualisez
Shopify
- Allez dans Boutique en ligne, puis Pages
- Modifiez votre page et passez en vue HTML
- Collez le code d'intégration
- Enregistrez
Webflow
- Ajoutez un élément Embed
- Collez le code d'intégration
- Ajustez la taille dans les réglages de l'élément
- Publiez
Notion
- Tapez /embed dans votre page
- Collez le lien du projet, pas le code iframe complet
- Redimensionnez le bloc si besoin
Intégrer une pièce Studio
Une pièce Studio partagée en Non répertorié ou Public s'intègre de la même façon : copiez son lien, qui commence par /studio/, et utilisez-le comme src de l'iframe.
Dépannage
L'intégration ne se charge pas
- Vérifiez que la visibilité est Non répertorié ou Public, et que vous avez enregistré le projet
- Vérifiez que l'adresse du projet est correcte
- Assurez-vous que votre site autorise les iframes d'autres sites
Mauvaise taille
- Modifiez les valeurs de largeur et de hauteur dans le code
- Utilisez du CSS pour dimensionner le conteneur
- Essayez le conteneur qui garde les proportions
La plateforme bloque les iframes
- Certaines plateformes limitent les intégrations externes
- Consultez la documentation de votre plateforme
- Partagez le lien au lieu d'intégrer le projet
La marque i3Dify sur le plan Gratuit
Sur le plan Gratuit, un projet intégré affiche la mention « Créé avec i3Dify » et une fine barre en bas. Pro et Business retirent les deux.
Sur mobile
Une intégration peut s'afficher différemment sur un petit écran. Testez-la à plusieurs tailles avant de publier.