---
title: "So betten Sie Code in eine React-Anwendung ein"
description: "Schritte, mit denen Sie den EmbedSocial-Widget-Code in eine React-, Vue-, Angular- oder TypeScript-Anwendung einbetten."
---

Das EmbedSocial-Widget ist ein Framework-unabhängiges einbettbares Widget: ein `<div>` mit einem `data-ref`-Attribut und dazu ein kleines Loader-Skript. Da das reines HTML ist, lässt sich derselbe Code in jedes JavaScript- oder TypeScript-Framework-Projekt einsetzen. Diese Anleitung behandelt React, Vue und Angular.

## Das Widget in React einbetten

In dieser Anleitung führe ich Sie ausführlich durch das Einbetten Ihres Widgets in eine React-Anwendung.

1\. Der erste Schritt ist, den Code aus Ihrem erstellten Widget zu kopieren:

![Kopieren des Codes aus dem erstellten EmbedSocial-Widget](https://embedsocial.com/images/docs/4797000/1.jpg)

2.Nachdem der Code kopiert ist, müssen Sie den HTML-Code vom JavaScript trennen, zum Beispiel:

**Das ist der EmbedSocial-Widget-Code:**

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

**HTML-Code:**

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

**JavaScript-Code:**

`(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\. Wechseln Sie als Nächstes zu Ihrer React-Anwendung, erstellen Sie eine neue Komponente in Ihrem Verzeichnis components und fügen Sie den HTML-Code in die render-Funktion ein:

![Einfügen des Widget-HTML in die render-Funktion einer neuen React-Komponente](https://embedsocial.com/images/docs/4797000/2.png)

Fügen Sie den JavaScript-Code in die Lifecycle-Methode componentDidMount ein:

![Einfügen des Widget-JavaScript in die Methode componentDidMount in React](https://embedsocial.com/images/docs/4797000/3.png)

4\. Gehen Sie zu der Seite, auf der Sie das Widget anzeigen möchten, in unserem Fall fügen wir es der Haupt-App.js hinzu, und importieren Sie die gerade erstellte Komponente:  

![Importieren der neuen Widget-Komponente in App.js in der React-App](https://embedsocial.com/images/docs/4797000/4.png)

5\. Fertig. Sobald Sie das getan und die Änderungen gespeichert haben, erscheint das Widget auf Ihrer Seite.

![Das EmbedSocial-Widget auf der Seite der React-App](https://embedsocial.com/images/docs/4797000/5.png)

> Wenn Sie Fragen haben, klicken Sie unten rechts auf das Chat-Symbol, um mit unserem Customer-Success-Team zu sprechen, oder schreiben Sie uns eine E-Mail an [support@embedsocial.com](mailto:support@embedsocial.com). Wir sind für Sie da 🙏

## In Vue einbetten

In Vue-Anwendungen gibt es zwei Möglichkeiten, benutzerdefinierten HTML-/JavaScript-Code einzubetten:

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

Zuerst müssen Sie Ihren Widget-Code kopieren:

![Kopieren des Codes](https://embedsocial.com/images/docs/4795049/1.jpg)

Nachdem Sie den Code kopiert haben, müssen Sie das HTML vom JavaScript trennen, zum Beispiel:

**EmbedSocial-Widget-Code:**

```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\. Das Widget über die Options API einbetten**

Um den EmbedSocial-Widget-Code in eine Vue-Anwendung einzubetten, die die Options API verwendet, folgen Sie bitte den Schritten unten:

Wechseln Sie zuerst zu Ihrer Vue-Anwendung und erstellen Sie eine neue Komponente in Ihrem Verzeichnis components:

![Erstellen einer neuen Vue-Komponente im Verzeichnis components für die Options API](https://embedsocial.com/images/docs/4795049/2.png)

Fügen Sie den HTML-Code des EmbedSocial-Widgets innerhalb der `<template>`-Tags ein:

![Einfügen des Widget-HTML innerhalb der template-Tags der Vue-Options-API-Komponente](https://embedsocial.com/images/docs/4795049/3.png)

Fügen Sie den JavaScript-Code des EmbedSocial-Widgets in den Lifecycle-Hook created ein:

![Einfügen des Widget-JavaScript in den Lifecycle-Hook created in Vue](https://embedsocial.com/images/docs/4795049/4.png)

Nachdem Sie nun die EmbedSocial-Widget-Komponente erstellt haben, müssen Sie die Komponente nur noch importieren und auf Ihrer Website anzeigen.

Öffnen Sie die Datei bzw. Seite, auf der Sie das Widget anzeigen möchten, und importieren Sie die Komponente, in diesem Fall importieren wir sie in App.vue:

![Importieren der Widget-Komponente in App.vue mit der Options API](https://embedsocial.com/images/docs/4795049/5.png)

Hier sind die Ergebnisse dieses Codes und der Verwendung der Options API  

![Das von der Vue-Options-API-Komponente gerenderte Widget](https://embedsocial.com/images/docs/4795049/6.png)

**2\. Composition API**

Die **Composition API** ist eine Ergänzung des Vue-Frameworks, die die Einschränkungen der in Vue2 verwendeten Options API beheben soll.

Um Ihren Widget-Code in eine Vue-Anwendung einzubetten, die die Composition API verwendet, folgen Sie den Schritten unten:

Wechseln Sie zuerst zu Ihrer Vue-Anwendung und erstellen Sie eine neue Komponente in Ihrem Verzeichnis components:

![Erstellen einer neuen Vue-Komponente im Verzeichnis components für die Composition API](https://embedsocial.com/images/docs/4795049/7.png)

Fügen Sie als Nächstes den HTML-Code des EmbedSocial-Widgets innerhalb der `<template>`-Tags ein:

![Einfügen des Widget-HTML innerhalb der template-Tags der Composition-API-Komponente](https://embedsocial.com/images/docs/4795049/8.png)

Anschließend müssen Sie die Funktion onMounted aus Vue importieren und den JavaScript-Code des EmbedSocial-Widgets in die Funktion onMounted einfügen:

![Einfügen des Widget-JavaScript in die Funktion onMounted in Vue](https://embedsocial.com/images/docs/4795049/9.png)

Mit den Schritten oben haben Sie die EmbedSocial-Widget-Komponente erstellt. Jetzt müssen wir die Komponente importieren und auf Ihrer Website anzeigen.

Öffnen Sie die Datei bzw. Seite, auf der Sie Ihr Widget anzeigen möchten, und importieren Sie die Komponente, in diesem Fall importieren wir sie in App.vue:

![Importieren der Widget-Komponente in App.vue mit der Composition API](https://embedsocial.com/images/docs/4795049/10.png)

Sobald das erledigt ist, wird Ihr Widget auf Ihrer Website angezeigt.

Fertig.

> Wenn Sie Fragen haben, klicken Sie unten rechts auf das Chat-Symbol, um mit unserem Customer-Success-Team zu sprechen, oder schreiben Sie uns eine E-Mail an [support@embedsocial.com](mailto:support@embedsocial.com). Wir sind für Sie da 🙏

## In Angular einbetten

In Angular-Anwendungen gibt es zwei Möglichkeiten, benutzerdefinierten JavaScript-Code zu integrieren.

Eine Möglichkeit ist, den Code direkt in das HTML einzubetten, die andere und beste Lösung ist, eine Komponente zu erstellen.

1.  # Code an beliebiger Stelle auf der Seite einbetten
    

Das ist die vertraute Variante und der einfachste Weg. Sie können also einfach das HTML in einer beliebigen Ihrer Angular-Dateien öffnen und den EmbedSocial-Code direkt einfügen.

Hier ist ein Beispiel:

![Der direkt in das HTML einer Angular-Datei eingefügte Widget-Code](https://embedsocial.com/images/docs/4796971/1.png)

**2\. Eine Komponente erstellen**

Dafür sind zwei Schritte nötig:

-   Die Komponente erstellen
    
-   Die Komponente verwenden
    

1\. Verwenden Sie im Terminal den folgenden Befehl **\`ng generate component EmbedSocialWidget\`**, um eine Angular-Komponente namens **\`EmbedSocialWidget\`** zu erstellen

2\. Nachdem die Komponente erstellt ist, öffnen Sie **\`EmbedSocialWidget.component.ts\`** und fügen Sie direkt über dem Konstruktor einen mit **\`@Input() decorated\`** versehenen String namens **\`refId\`** hinzu.

3\. Fügen Sie in derselben Datei innerhalb der Funktion **\`ngOnInit()\`** das EmbedSocial-JavaScript hinzu, das für den Aufbau des Widgets zuständig ist.

Ihre Komponentendatei **\`EmbedSocialWidget.component.ts\`** sollte aussehen wie im Bild unten:

![Die fertige Datei EmbedSocialWidget.component.ts mit dem refId-Input und ngOnInit](https://embedsocial.com/images/docs/4796971/2.png)

**Die Komponente verwenden**

[Melden Sie sich](/admin/login) zuerst bei Ihrem EmbedSocial-Konto an und gehen Sie zu [Widgets](/admin/reviews_feed). Öffnen Sie eines der Widgets, das Sie einbetten möchten, und holen Sie sich den Wert des EmbedSocial-Attributs **data-ref** (wie oben erwähnt).

Das data-ref-Attribut sollte so aussehen:

data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"

Sobald Sie den data-ref haben, können Sie die neu erstellte Komponente **\`EmbedSocialWidget\`** überall in Ihrem Angular-Projekt frei verwenden. Passen Sie einfach das **\`refId\`**-Binding der Komponente mit der **refId** an, die Sie zuvor aus EmbedSocial kopiert haben.

Hier ist ein Beispiel für die Verwendung der Komponente:

![Verwendung der EmbedSocialWidget-Komponente mit dem kopierten refId-Binding in Angular](https://embedsocial.com/images/docs/4796971/3.png)

Fertig.

## Das einbettbare Widget in einem TypeScript-Projekt verwenden

Am Einbettungscode selbst ändert sich nichts, denn das Widget ist reines HTML plus ein Loader-Skript. In einem TypeScript-Framework-Projekt typisieren Sie nur den Wrapper, den Sie darum herum bauen. Das Angular-Beispiel oben ist bereits TypeScript: `refId` wird in `EmbedSocialWidget.component.ts` als `@Input()`-String deklariert. Machen Sie es in React oder Vue genauso, typisieren Sie die Widget-Referenz als `string`-Prop an Ihrer eigenen Komponente und belassen Sie das Loader-Skript im Mount-Lifecycle-Hook.

> Wir hoffen, das war hilfreich. Wenn Sie Fragen haben oder Unterstützung benötigen, wenden Sie sich gerne an: [support@embedsocial.com](mailto:support@embedsocial.com)