In Vue-Anwendungen gibt es zwei Optionen, um benutzerdefinierten HTML-/Javascript-Code einzubetten:
Composition API
Options API
Als erstes musst du deinen Widget-Code kopieren:
Nachdem du den Code kopiert hast, musst du HTML von dem Javascript-Code trennen. Hier ein Beispiel:
EmdedSocial Widget-Code:
<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. Einbinden des Widgets über Options API
Um den EmbedSocial Widget-Code in einer Vue-Anwendung mit der Options API einzubetten, befolge bitte die folgenden Schritte:
Gehe zuerst zu deiner Vue-Anwendung und erstelle eine neue Komponente in deinem "components"-Verzeichnis:
Füge den EmbedSocial Widget-HTML-Code innerhalb der <template> Tags ein:
Füge den EmbedSocial Widget-Javascript-Code innerhalb des erstellten Lifecycle-Hooks ein:
Erstelle jetzt, nach Erstellung der EmbedSocial Widget-Komponente, importiere diese und zeige sie auf deiner Website an.
Öffne die Datei/Seite, auf der du das Widget angezeigt bekommen möchtest und importiere die Komponente. In diesem Fall importieren wir sie in App.vue:
So sehen die Ergebnisse des Codes und bei Verwendung der Option API aus:
2. Composition-API
Die Composition API ist ein Zusatz zum Vue-Framework, der geschaffen wurde, um die Einschränkungen der in Vue2 verwendeten Options API zu adressieren.
Um deinen Widget-Code einzubetten in einer Vue-Anwendung, die die Composition API verwendet, musst du die folgenden Schritte befolgen:
Zuerst, gehe zu deiner Vue-Anwendung und erstelle eine neue Komponente in deinem "components"-Verzeichnis:
Füge den EmbedSocial Widget-HTML-Code innerhalb der <template> Tags ein:
Importiere den onCreated Funktion von Vue und füge den EmbedSocial Widget-Javascript-Code innerhalb der onCreated Funktion ein:
Mit den oben genannten Schritten hast du die EmbedSocial Widget-Komponente erstellt und musst diese nur noch importieren und auf deiner Website anzeigen.
Öffne die Datei/Seite, auf der du das Widget angezeigt haben möchtest und importiere die Komponente. In diesem Fall importieren wir sie in App.vue:
Jetzt wird dein Widget auf deiner Website angezeigt.
Das war alles.
Falls du Fragen hast, klicke auf das Chatsymbol unten rechts, um mit unserem Customer-Success-Team zu sprechen oder sende uns eine E-Mail an support@embedsocial.com
Wir sind für dich da 🙏