---
title: "Come incorporare il codice in un'applicazione React"
description: "Passaggi per incorporare il codice del widget EmbedSocial in un'applicazione React, Vue, Angular o TypeScript."
---

Il widget EmbedSocial è un widget incorporabile indipendente dal framework: un `<div>` che porta un attributo `data-ref`, più un piccolo script di caricamento. Poiché si tratta di semplice HTML, lo stesso codice si inserisce in qualsiasi progetto con framework JavaScript o TypeScript. Questa guida copre React, Vue e Angular.

## Incorpora il widget in React

In questo tutorial ti darò una guida dettagliata su come incorporare il tuo widget in un'applicazione React.

1\. Il primo passaggio è copiare il codice dal widget che hai creato:

![Copiare il codice dal widget EmbedSocial creato](https://embedsocial.com/images/docs/4797000/1.jpg)

2.Una volta copiato il codice dovrai separare il codice HTML dal JavaScript, per esempio:

**Questo è il codice del widget 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>`

**Codice HTML:**

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

**Codice 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\. Poi vai alla tua applicazione React, crea un nuovo componente nella tua directory components e incolla il codice HTML dentro la funzione render:

![Incollare l'HTML del widget dentro la funzione render di un nuovo componente React](https://embedsocial.com/images/docs/4797000/2.png)

Incolla il codice JavaScript dentro il metodo di ciclo di vita componentDidMount:

![Incollare il JavaScript del widget dentro il metodo componentDidMount in React](https://embedsocial.com/images/docs/4797000/3.png)

4\. Vai alla pagina in cui vuoi mostrare il widget, nel nostro caso lo aggiungeremo al file principale App.js, e importa il componente che abbiamo appena creato:  

![Importare il nuovo componente widget in App.js nell'app React](https://embedsocial.com/images/docs/4797000/4.png)

5\. Ecco fatto. Una volta fatto questo e salvate le modifiche, il widget comparirà nella tua pagina.

![Il widget EmbedSocial mostrato nella pagina dell'app React](https://embedsocial.com/images/docs/4797000/5.png)

> Se hai domande, fai clic sull'icona della chat in basso a destra per parlare con il nostro team di assistenza clienti oppure scrivici a [support@embedsocial.com](mailto:support@embedsocial.com) Siamo qui per te 🙏

## Incorpora in Vue

Nelle applicazioni Vue ci sono due opzioni per incorporare codice HTML/javascript personalizzato:

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

Per prima cosa dovrai copiare il codice del tuo widget:

![Copiare il codice](https://embedsocial.com/images/docs/4795049/1.jpg)

Dopo aver copiato il codice, dovrai separare l'HTML dal javascript, per esempio:

**Codice del widget 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\. Incorporare il widget tramite le Options API**

Per incorporare il codice del widget EmbedSocial in un'applicazione Vue che usa le Options API, segui i passaggi qui sotto:

Per prima cosa vai alla tua applicazione Vue e crea un nuovo componente nella tua directory components:

![Creare un nuovo componente Vue nella directory components per le Options API](https://embedsocial.com/images/docs/4795049/2.png)

Incolla il codice HTML del widget EmbedSocial dentro i tag `<template>`:

![Incollare l'HTML del widget dentro i tag template del componente Vue con le Options API](https://embedsocial.com/images/docs/4795049/3.png)

Incolla il codice javascript del widget EmbedSocial dentro l'hook di ciclo di vita created:

![Incollare il JavaScript del widget dentro l'hook di ciclo di vita created in Vue](https://embedsocial.com/images/docs/4795049/4.png)

Ora che hai creato il componente widget EmbedSocial, devi solo importare il componente e mostrarlo sul tuo sito web.

Apri il file o la pagina in cui vuoi mostrare il widget e importa il componente, in questo caso lo importiamo in App.vue:

![Importare il componente widget in App.vue con le Options API](https://embedsocial.com/images/docs/4795049/5.png)

Ecco i risultati di questo codice con le Options API  

![Il widget renderizzato dal componente Vue con le Options API](https://embedsocial.com/images/docs/4795049/6.png)

**2\. Composition API**

Le **Composition API** sono un'aggiunta al framework Vue creata per superare i limiti delle Options API usate in Vue2.

Per incorporare il codice del tuo widget in un'applicazione Vue che usa le Composition API, dovrai seguire i passaggi qui sotto:

Per prima cosa vai alla tua applicazione Vue e crea un nuovo componente nella tua directory components:

![Creare un nuovo componente Vue nella directory components per le Composition API](https://embedsocial.com/images/docs/4795049/7.png)

Poi incolla il codice HTML del widget EmbedSocial dentro i tag `<template>`:

![Incollare l'HTML del widget dentro i tag template del componente con le Composition API](https://embedsocial.com/images/docs/4795049/8.png)

Poi dovrai importare la funzione onMounted da Vue e incollare il codice javascript del widget EmbedSocial dentro la funzione onMounted:

![Incollare il JavaScript del widget dentro la funzione onMounted in Vue](https://embedsocial.com/images/docs/4795049/9.png)

Seguendo i passaggi qui sopra hai creato il componente widget EmbedSocial: ora dobbiamo importare il componente e mostrarlo sul tuo sito web.

Apri il file o la pagina in cui vuoi mostrare il tuo widget e importa il componente, in questo caso lo importiamo in App.vue:

![Importare il componente widget in App.vue con le Composition API](https://embedsocial.com/images/docs/4795049/10.png)

Una volta fatto questo, il tuo widget verrà mostrato sul tuo sito web.

Ecco fatto.

> Se hai domande, fai clic sull'icona della chat in basso a destra per parlare con il nostro team di assistenza clienti oppure scrivici a [support@embedsocial.com](mailto:support@embedsocial.com) Siamo qui per te 🙏

## Incorpora in Angular

Nelle applicazioni Angular ci sono due opzioni per integrare codice JavaScript personalizzato.

Un'opzione è incorporare il codice direttamente nell'HTML, mentre l'altra soluzione, la migliore, è creare un Component.

1.  # Incorporare il codice in qualsiasi punto della pagina
    

Questa è un'opzione conosciuta ed è la via più semplice. Puoi semplicemente aprire l'html in uno qualsiasi dei tuoi file Angular e incollare direttamente il codice di EmbedSocial.

Ecco un esempio:

![Il codice del widget incollato direttamente nell'HTML di un file Angular](https://embedsocial.com/images/docs/4796971/1.png)

**2\. Creare un Component**

Per farlo devi seguire due passaggi:

-   Creare il componente
    
-   Usare il componente
    

1\. Nel terminale, usa il comando **\`ng generate component EmbedSocialWidget\`** per creare un componente angular chiamato **\`EmbedSocialWidget\`**

2\. Una volta creato il componente, apri **\`EmbedSocialWidget.component.ts\`** e aggiungi una stringa **\`@Input() decorated\`** chiamata **\`refId\`** subito sopra il constructor.

3\. Nello stesso file, dentro la funzione **\`ngOnInit()\`**, aggiungi il javascript di embedsocial, che si occupa di costruire il widget.

Il tuo file di componente **\`EmbedSocialWidget.component.ts\`** dovrebbe avere l'aspetto dell'immagine qui sotto:

![Il file EmbedSocialWidget.component.ts completato con l'input refId e ngOnInit](https://embedsocial.com/images/docs/4796971/2.png)

**Usare il componente**

Per prima cosa, [accedi](/admin/login) al tuo account EmbedSocial e vai su [Widget](/admin/reviews_feed). Apri uno dei widget che vuoi incorporare e ottieni il valore dell'attributo **data-ref** di EmbedSocial (come indicato sopra).

L'attributo data-ref dovrebbe avere questo aspetto:

data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"

Una volta ottenuto il data-ref, puoi usare liberamente il componente **\`EmbedSocialWidget\`** appena creato in qualsiasi punto del tuo progetto angular. Basta modificare il binding **\`refId\`** del componente con il **refId** che hai copiato prima da EmbedSocial.

Ecco un esempio di utilizzo del componente:

![Usare il componente EmbedSocialWidget con il binding refId copiato in Angular](https://embedsocial.com/images/docs/4796971/3.png)

Ecco fatto.

## Usare il widget incorporabile in un progetto TypeScript

Nel codice di incorporamento non cambia nulla, perché il widget è semplice HTML più uno script di caricamento. In un progetto con framework TypeScript tipizzi soltanto il wrapper che costruisci attorno a esso. L'esempio Angular qui sopra è già TypeScript: `refId` è dichiarato come stringa `@Input()` dentro `EmbedSocialWidget.component.ts`. Fai lo stesso in React o Vue, tipizza il ref del widget come prop `string` sul tuo componente e tieni lo script di caricamento nell'hook di ciclo di vita di mount.

> Speriamo sia stato utile e, se hai domande o ti serve assistenza, non esitare a contattarci a: [support@embedsocial.com](mailto:support@embedsocial.com)