Em aplicações Vue, existem duas opções para incorporar um código HTML/javascript personalizado:
Composition API
Options API
Primeiro, você precisará copiar o seu código do widget:
Após copiar o código, você precisará separar o HTML do javascript, por exemplo:
Código do 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. Incorporando o widget através da Options API
Para incorporar o código do Widget EmbedSocial em uma aplicação Vue que utilize a Options API, siga as etapas abaixo:
Primeiro, vá para sua aplicação Vue e crie um novo componente no seu diretório de componentes:
Cole o código HTML do widget EmbedSocial dentro das tags <template>:
Cole o código javascript do widget EmbedSocial dentro do lifecycle hook criado:
Agora, depois de ter criado o componente do widget EmbedSocial, basta importá-lo e exibí-lo em seu website.
Abra o arquivo/página onde você deseja exibir o widget e importe o componente, neste caso, estamos importando-o no App.vue:
Abaixo está o resultado deste código ao usar a Options API:
2. Composition API
A Composition API é uma adição ao framework Vue criada para abordar as limitações da Options API usada no Vue2.
Para incorporar o seu código do widget em uma aplicação Vue que utiliza a Composition API, siga os passos abaixo:
Primeiro, vá para sua aplicação Vue e crie um novo componente em seu diretório de componentes:
Em seguida, cole o código HTML do widget EmbedSocial dentro das tags <template>:
Então você precisará importar a função onCreated do Vue e colar o código javascript do widget EmbedSocial dentro da função onCreated:
Ao seguir os passos acima, você criou o componente do widget EmbedSocial, agora é preciso importá-lo e exibi-lo em seu website.
Abra o arquivo/página onde você deseja exibir seu widget e importe o componente, neste caso, estamos importando-o no App.vue:
Com isso, seu widget será exibido em seu website.
Isso é tudo.
Se você tiver alguma dúvida, clique no ícone de chat no canto inferior direito para falar com nossa equipe de atendimento ao cliente ou nos envie um e-mail parasupport@embedsocial.com
Estamos aqui para ajudar 🙏