Pour les applications Vue, il existe deux options pour intégrer du code HTML/javascript personnalisé:
Composition API
Options API
La première chose à faire est de copier votre code de widget:
Après avoir copié le code, vous devrez séparer le code HTML du javascript, par exemple:
Code du widget EmbedSocial :
<div class="embedsocial-hashtag" data-ref="a4f74f50d0016f41895f78a3141a52b07c6933aa"></div> <script> (function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript")); </script>HTML
<div class="embedsocial-hashtag" data-ref="a4f74f50d0016f41895f78a3141a52b07c6933aa"></div
CSS
(function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript")); 1. Intégrer le widget avec l'API d'options
Pour intégrer le code widget EmbedSocial dans une application Vue utilisant l'API d'options, veuillez suivre les étapes ci-dessous :
Tout d'abord, allez sur votre application Vue et créez un nouveau composant dans votre répertoire de composants :
Collez le code HTML du widget EmbedSocial entre les balises <template>:
Collez le code javascript du widget EmbedSocial à l'entrée du cycle de vie du composant créé :
Maintenant qu'on a créé le composant du widget EmbedSocial, il faut l'importer et l'afficher sur votre site.
Ouvrez le fichier/page sur laquelle vous voulez afficher le widget et importez le composant, dans ce cas, on l'importe dans App.vue :
Voici les résultats obtenus en utilisant l'API Options
2. Composition API
La Composition API est une extension du framework Vue créée pour pallier les limitations de l'API Options utilisée en Vue2.
Pour intégrer votre code widget dans une application Vue qui utilise la Composition API, suivez les étapes suivantes:
Tout d'abord, aller sur votre application Vue et créez un nouveau composant dans votre répertoire de composants:
Collez le code HTML du widget EmbedSocial entre les balises <template>:
Ensuite, vous devrez importer la fonction onCreated de Vue, et coller le code javascript du widget EmbedSocial dans la fonction onCreated :
En suivant ces étapes, vous avez créé le composant du widget EmbedSocial, nous devons l'importer et l'afficher sur votre site.
Ouvrez le fichier/page où vous voulez afficher votre widget et importez le composant, dans ce cas, nous l'importons dans App.vue :
Une fois cela fait, votre widget sera affiché sur votre site.
C'est tout.
Si vous avez des questions, cliquez sur l'icône de chat en bas à droite pour parler avec notre équipe de service client ou envoyez-nous un email à support@embedsocial.com
Nous sommes là pour vous 🙏