---
title: "Como incorporar código numa aplicação React"
description: "Passos para incorporar o código do widget do EmbedSocial numa aplicação React, Vue, Angular ou TypeScript."
---

O widget do EmbedSocial é um widget incorporável independente de framework: um `<div>` com um atributo `data-ref`, mais um pequeno script de carregamento. Como isso é HTML simples, o mesmo código encaixa em qualquer projeto de framework JavaScript ou TypeScript. Este guia cobre React, Vue e Angular.

## Incorpore o widget no React

Neste tutorial, vou dar-lhe um guia detalhado sobre como incorporar o seu widget numa aplicação React.

1\. O primeiro passo é copiar o código do widget que criou:

![A copiar o código do widget do EmbedSocial criado](https://embedsocial.com/images/docs/4797000/1.jpg)

2.Depois de copiar o código, tem de separar o código HTML do JavaScript, por exemplo:

**Este é o código do widget do EmbedSocial:**

`<div class="embedsocial-hashtag" data-ref="f718fc77f3f7142d374023362f2fd1f2aa471605"></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>`

**Código HTML:**

`<div class="embedsocial-hashtag" data-ref="f718fc77f3f7142d374023362f2fd1f2aa471605"></div>`

**Código JavaScript:**

`(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"));`

3\. A seguir, vá à sua aplicação React, crie um novo componente na sua diretoria components e cole o código HTML dentro da função render:

![A colar o HTML do widget dentro da função render de um novo componente React](https://embedsocial.com/images/docs/4797000/2.png)

Cole o código JavaScript dentro do método de ciclo de vida componentDidMount:

![A colar o JavaScript do widget dentro do método componentDidMount no React](https://embedsocial.com/images/docs/4797000/3.png)

4\. Navegue até à página onde quer apresentar o widget; no nosso caso, vamos adicioná-lo ao App.js principal, e importe o componente que acabámos de criar:  

![A importar o novo componente do widget para o App.js na aplicação React](https://embedsocial.com/images/docs/4797000/4.png)

5\. É tudo. Assim que fizer isto e guardar as alterações, o widget aparece na sua página.

![O widget do EmbedSocial apresentado na página da aplicação React](https://embedsocial.com/images/docs/4797000/5.png)

> Se tiver alguma questão, clique no ícone de chat no canto inferior direito para falar com a nossa equipa de apoio ao cliente ou envie-nos um email para [support@embedsocial.com](mailto:support@embedsocial.com). Estamos aqui para si 🙏

## Incorporar no Vue

Nas aplicações Vue, há duas opções para incorporar código HTML/javascript personalizado:

-   **Composition API**
    
-   **Options API**
    

Primeiro, tem de copiar o código do seu widget:

![A copiar o código](https://embedsocial.com/images/docs/4795049/1.jpg)

Depois de copiar o código, tem de separar o HTML do javascript, por exemplo:

**Código do widget do EmbedSocial:**

```html
<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**

```html
<div class="embedsocial-hashtag" data-ref="a4f74f50d0016f41895f78a3141a52b07c6933aa"></div>
```

**JavaScript**

```js
(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\. Incorporar o widget através da Options API**

Para incorporar o código do widget do EmbedSocial numa aplicação Vue que usa a Options API, siga os passos abaixo:

Primeiro, vá à sua aplicação Vue e crie um novo componente na sua diretoria components:

![A criar um novo componente Vue na diretoria components para a Options API](https://embedsocial.com/images/docs/4795049/2.png)

Cole o código HTML do widget do EmbedSocial dentro das tags `<template>`:

![A colar o HTML do widget dentro das tags template do componente Vue com a Options API](https://embedsocial.com/images/docs/4795049/3.png)

Cole o código javascript do widget do EmbedSocial dentro do lifecycle hook created:

![A colar o JavaScript do widget dentro do lifecycle hook created no Vue](https://embedsocial.com/images/docs/4795049/4.png)

Agora que criou o componente do widget do EmbedSocial, só precisa de importar o componente e apresentá-lo no seu site.

Abra o ficheiro/página onde quer apresentar o widget e importe o componente; neste caso, estamos a importá-lo no App.vue:

![A importar o componente do widget para o App.vue com a Options API](https://embedsocial.com/images/docs/4795049/5.png)

Aqui estão os resultados deste código e do uso da Options API  

![O widget apresentado pelo componente Vue com a Options API](https://embedsocial.com/images/docs/4795049/6.png)

**2\. Composition API**

A **Composition API** é uma adição à framework Vue, criada para resolver as limitações da Options API usada no Vue2.

Para incorporar o código do seu widget numa aplicação Vue que usa a Composition API, tem de seguir os passos abaixo:

Primeiro, vá à sua aplicação Vue e crie um novo componente na sua diretoria components:

![A criar um novo componente Vue na diretoria components para a Composition API](https://embedsocial.com/images/docs/4795049/7.png)

A seguir, cole o código HTML do widget do EmbedSocial dentro das tags `<template>`:

![A colar o HTML do widget dentro das tags template do componente com a Composition API](https://embedsocial.com/images/docs/4795049/8.png)

Depois tem de importar a função onMounted do Vue e colar o código javascript do widget do EmbedSocial dentro da função onMounted:

![A colar o JavaScript do widget dentro da função onMounted no Vue](https://embedsocial.com/images/docs/4795049/9.png)

Ao seguir os passos acima, criou o componente do widget do EmbedSocial; agora temos de importar o componente e apresentá-lo no seu site.

Abra o ficheiro/página onde quer apresentar o seu widget e importe o componente; neste caso, estamos a importá-lo no App.vue:

![A importar o componente do widget para o App.vue com a Composition API](https://embedsocial.com/images/docs/4795049/10.png)

Feito isto, o seu widget é apresentado no seu site.

É tudo.

> Se tiver alguma questão, clique no ícone de chat no canto inferior direito para falar com a nossa equipa de apoio ao cliente ou envie-nos um email para [support@embedsocial.com](mailto:support@embedsocial.com). Estamos aqui para si 🙏

## Incorporar no Angular

Nas aplicações Angular, há duas opções para integrar código JavaScript personalizado.

Uma opção é incorporar o código diretamente no HTML, e a outra melhor solução é criar um componente.

1.  # Incorporar código em qualquer parte da página
    

Esta é uma opção conhecida e a forma mais fácil. Basta aceder ao html em qualquer um dos seus ficheiros Angular e colar o código do EmbedSocial diretamente.

Aqui está um exemplo:

![O código do widget colado diretamente no HTML de um ficheiro Angular](https://embedsocial.com/images/docs/4796971/1.png)

**2\. Criar um componente**

Há dois passos que tem de seguir para conseguir isto:

-   Criar o componente
    
-   Usar o componente
    

1\. No terminal, use o seguinte comando **\`ng generate component EmbedSocialWidget\`** para criar um componente angular chamado **\`EmbedSocialWidget\`**

2\. Depois de criar o componente, abra **\`EmbedSocialWidget.component.ts\`** e adicione uma string **\`@Input() decorated\`** chamada **\`refId\`** logo acima do construtor.

3\. Nesse mesmo ficheiro, dentro da função **\`ngOnInit()\`**, adicione o javascript do embedsocial, que é responsável por construir o widget.

O seu ficheiro de componente **\`EmbedSocialWidget.component.ts\`** deve ficar como a imagem abaixo:

![O ficheiro EmbedSocialWidget.component.ts concluído, com o input refId e o ngOnInit](https://embedsocial.com/images/docs/4796971/2.png)

**Usar o componente**

Primeiro, [inicie sessão](/admin/login) na sua conta EmbedSocial e vá a [Widgets](/admin/reviews_feed). Abra um dos widgets que quer incorporar e obtenha o valor do atributo **data-ref** do EmbedSocial (como referido acima).

O atributo data-ref deve ter este aspeto:

data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"

Assim que tiver o data-ref, pode usar o componente **\`EmbedSocialWidget\`** recém-criado livremente em qualquer parte do seu projeto angular. Basta editar o binding **\`refId\`** do componente com o **refId** que copiou antes do EmbedSocial.

Aqui está um exemplo de uso do componente:

![A usar o componente EmbedSocialWidget com o binding refId copiado no Angular](https://embedsocial.com/images/docs/4796971/3.png)

É tudo.

## Usar o widget incorporável num projeto TypeScript

Nada muda no próprio código de incorporação, porque o widget é HTML simples mais um script de carregamento. Num projeto de framework TypeScript, só tipifica o wrapper que constrói à volta dele. O exemplo Angular acima já é TypeScript: `refId` é declarado como uma string `@Input()` dentro de `EmbedSocialWidget.component.ts`. Faça o mesmo no React ou no Vue: tipifique a ref do widget como uma prop `string` no seu próprio componente e mantenha o script de carregamento no lifecycle hook de montagem.

> Esperamos que isto tenha sido útil e, se tiver questões ou precisar de assistência, sinta-se à vontade para nos contactar: [support@embedsocial.com](mailto:support@embedsocial.com)