AI-Widgets integrieren

Übersicht

Einbetten

AI-Widgets zu integrieren, ist einfacher, als du denkst. Unabhängig von dem Content-Management-System, das du verwendest, kannst du diese einfachen Schritte befolgen.

Schritt 1: Melde dich bei deinem Konto an. Gehen zur Widget-Bibliothek, wenn du ein eigenes Widget erstellt hast, oder gehe zur allgemeinen Widget-Bibliothek und suche das das Widget, das du einbetten möchtest. Klicke auf Konfigurieren & Einbetten, um die Stiloptionen zu öffnen. Hier wählst du die Farbe, die Breite und den Randstil des Widgets aus.

Schritt 2: Wenn du dein Thema ausgewählt hast, kannst du den Code kopieren, indem du auf Einbetten klickst. Kopiere den <script>-Code. Füge den Code zwischen den <head>- und </head>-Abschnitt deiner Website ein.

Schritt 3: Jetzt kannst du den <div>-Code kopieren und ihn an der Stelle auf der Landingpage einfügen, an der das Widget platziert werden soll. Jetzt bist du fertig und bereit, damit deine Website-Benutzer es ausprobieren!

Das AI-Widget in WordPress einbetten

Das Einbetten deines Widgets in Wordpress ist ziemlich einfach.

Schritt 1: Öffne die Seite, auf der das Widget angezeigt werden soll.

Schritt 2: Füge ein Html-Feld auf der Seite ein, in der das Widget eingefügt werden soll.

Schritt 3: Kopiere beide Codezeilen, script und div, in ein html-Feld.

Wenn du Elementor verwendest, um den Inhalt deiner Seite zu erstellen, gehe zum Abschnitt Elemente und wähle das HTML-Element. Nun kannst du den Code des AI-Widgets einfügen. Verschiebe das HTML-Element in Elementor, um die Position des AI-Widgets zu ändern.

Alternativ kannst du auch das Theme anpassen:

1. Greife auf dein WordPress-Dashboard zu

2. Greife auf den Theme Customizer zu: Im WordPress-Dashboard gehe im linken Menü zu "Design". Je nach Theme steht dort möglicherweise "Anpassen" oder "Theme Customizer". Klicken Sie auf diese Option.

4. Finde den Abschnitt "Additional CSS" oder "Benutzerdefinierter Code". Der Speicherort der Codeplatzierung kann je nach Ihrem Theme variieren. Suchen Sie nach einem Abschnitt mit dem Namen "Zusätzliches CSS", "Benutzerdefinierter Code", "Header" oder ähnlichem.

5. Füge den Code in das Feld ein und speicher die Änderungen.

Das AI-Widget in HubSpot einbetten

Du kannst Code im Header-Bereich Ihrer Website mithilfe des Moduls "Benutzerdefinierter HTML" in HubSpot hinzufügen.

Schritt 1: Gehe zum HubSpot-Dashboard und melden dich mit deinem Konto an.

Schritt 2: Wenn du Code zu einer bestimmten Seite hinzufügen möchtest, navigiere zu dieser Seite, indem du zu Marketing > Website > Website-Seiten gehen und die Seite auswählst, die du bearbeiten möchtest. Wenn du Code zu einer Vorlage hinzufügen möchtest, der auf mehreren Seiten verwendet wird, kannst du zu Marketing > Website > Vorlagen gehen und die Vorlage auswählen, die du bearbeiten möchtest.

Schritt 3: Klicke auf die Schaltfläche "Bearbeiten", um den Seiten- oder Vorlageneditor zu öffnen.

Schritt 4: Im Seiten- oder Vorlageneditor kannst du ein Modul "Benutzerdefinierter HTML" hinzufügen, an der Stelle, an der du den Code einfügen möchtest. Um ein Modul hinzuzufügen, klicke auf das "+"-Symbol, um die Modulbibliothek zu öffnen, suche nach "Benutzerdefinierter HTML" und ziehe es an die gewünschte Stelle im Header-Bereich.

Schritt 5: Nachdem das Modul "Benutzerdefinierter HTML" hinzugefügt wurde, klicke darauf, um den Editor zu öffnen. Im Editor kannst du deinen KI-Widget-Code einfügen. Du kannst auch einen Namen für das Modul zur Referenz hinzufügen.

Schritt 6: Nachdem du den Code hinzugefügt hast, stelle sicher, dass du die Änderungen speicherst. Klicke abschließend auf die Schaltfläche "Veröffentlichen", um die Änderungen auf der Website live zu schalten.

Zusätzlich, wenn du Zugang zum Design Manager in HubSpot hast, kannst du auch Code im Header über mehrere Seiten hinweg hinzufügen, indem du die globale Kopfzeilen-Vorlage bearbeitest. Dies ist nützlich, um Code hinzuzufügen, der auf allen Seiten Ihrer Website angezeigt werden soll.

AI-Widget in Umbraco einbetten

In Umbraco kannst du Code im Header-Bereich deiner Website bearbeiten, indem du dasTemplate änderst, das Ihren Dokumenttypen zugeordnet ist. Hier sind die allgemeinen Schritte, um Code im Header-Bereich hinzuzufügen:

Schritt 1: Melde dich im Umbraco-Backend mit deinen Anmeldedaten an.

Schritt 2: Navigiere zu Einstellungen und Vorlagen.

Schritt 3: Ändere das Template für den Dokumenttyp, indem du den Code direkt im <head>-Bereich hinzufügen.

Schritt 4: Nachdem du den Code hinzugefügt hast, speichere die Änderungen und veröffentliche sie bei Bedarf. Dadurch werden die Codeänderungen auf deiner Website live geschaltet.

Schritt 5: Kopiere nun die zweite Zeile des Codes und füge sie in den benutzerdefinierten HTML-Bereich der Seite ein, auf der du das Widget anzeigen möchtest.