{"id":679,"date":"2020-02-26T19:18:05","date_gmt":"2020-02-26T19:18:05","guid":{"rendered":"https:\/\/profi-tutorials.de\/e-business\/?p=679"},"modified":"2020-03-13T11:43:37","modified_gmt":"2020-03-13T11:43:37","slug":"convertchat-chatbot-einbinden","status":"publish","type":"post","link":"https:\/\/profi-tutorials.de\/e-business\/convertchat\/convertchat-chatbot-einbinden\/","title":{"rendered":"ConvertChat – Chatbot einbinden"},"content":{"rendered":"

In diesem Tutorial werden wir Ihnen zeigen, wie Sie Ihren mit ConvertChat erstellten Chatbot in Ihre Webseite einbinden können.<\/p>\n

Anzeigemodus<\/h2>\n

Bei der Einbindung <\/strong>eines Chatbots <\/strong>auf Ihrer Webseite ist es wichtig zu wissen, wie der Bot auf der Webseite angezeigt werden soll. Bei dem sogenannten Anzeigemodus <\/strong>haben Sie die Wahl zwischen 3 verschiedenen Einstellungen. Diese können Sie in der Chatbot-Konfiguration<\/strong> unter dem Punkt “Allgemein”<\/strong> einstellen:<\/p>\n

\"convertchat-anzeigemodus\"<\/span><\/p>\n

Näheres zu dieser und anderen Einstellungen in der ConvertChat Chatbot-Konfiguration können Sie in unserem Beitrag zur Erstellung eines Chatbot<\/a> nachlesen.<\/p>\n

Je nach gewählter Einstellung können Sie den Chatbot als Inline Widget<\/strong> direkt im Content anzeigen, oder aber als Overlay <\/strong>einfügen, welches sich über Ihrem bestehenden Content öffnet.<\/p>\n

Einbettungscode kopieren<\/h2>\n

Den Einbettungscode<\/strong>, den Sie später auf Ihrer Webseite einfügen können, finden Sie über den Menüpunkt “Bots”.<\/strong><\/p>\n

\"convertchat-menu-bots\"<\/span><\/p>\n

In der Auflistung aller Ihrer bereits erstellten Chatbots<\/strong> wird für jeden Chatbot<\/strong> auch ein Button “Code”<\/strong> angezeigt, über den Sie ein Fenster mit dem Einbettungscode<\/strong> öffnen können.<\/p>\n

\"convertchat-code-button\"<\/span><\/p>\n

Inline Widget einfügen<\/h2>\n

Bei Inline Widgets<\/strong> können Sie den zuvor kopierten Code an beliebiger Stelle Ihrer Webseite einfügen, um den Chat dann an dieser Stelle anzuzeigen. Bei HTML-Webseiten<\/strong> fügen Sie den Code manuell direkt in den Body<\/strong> Ihres HTML-Codes<\/strong> ein.<\/p>\n

Im Folgenden wird einmal die Einbindung auf WordPress <\/strong>Seiten mit dem nativen WordPress <\/strong>Editor <\/strong>bzw. mit Thrive <\/strong>Architect <\/strong>beschrieben.<\/p>\n

WordPress Editor<\/h3>\n

Falls Sie den WordPress Editor<\/strong> verwenden, dann können Sie den kopierten Einbettungscode <\/strong>einfach in einen “Custom HTML<\/a>”<\/strong>Block <\/strong>einfügen. Diesen finden Sie in der Kategorie <\/strong>“Formatting”<\/strong>.<\/p>\n

Der Block <\/strong>sollte dann etwa so aussehen:<\/p>\n

\"convertchat-wp-code\"<\/span><\/p>\n

Thrive Architect<\/h3>\n

Die Einbindung in Thrive Architect<\/strong> funktioniert an dieser Stelle ähnlich wie mit dem WordPress <\/strong>Editor<\/strong>. Zunächst fügen Sie ein “Custom HTML”<\/strong> Element an der gewünschten Stelle ein.<\/p>\n

\"convertchat-thrive-custom-html\"<\/span><\/p>\n

Nach dem Einfügen des “Custom HTML”<\/strong> Elements <\/strong>können Sie den Einbettungscode <\/strong>in das neu geöffnete Code-Fenster einfügen. Nach einem Klick auf “Save”<\/strong> ist der Chatbot <\/strong>fertig eingebettet.<\/p>\n

\"convertchat-thrive-code\"<\/span><\/p>\n

Es ist zu beachten, dass das Widget <\/strong>erst in der Preview<\/strong>, bzw. auf der Live<\/strong> Seite<\/strong> angezeigt wird. Im Editor <\/strong>werden Sie zunächst nur die Meldung “Preview not available.”<\/strong> angezeigt bekommen:<\/p>\n

\"thrive-no-preview\"<\/span><\/p>\n

Overlay Widget (Thrive Architect)<\/h2>\n

Bei Overlay <\/strong>Widgets <\/strong>müssen Sie den kopierten Einbettungscode <\/strong>in den Footer <\/strong>Ihrer Seite einfügen. Dies wird auf normalen HTML-Webseiten<\/strong> wieder manuell gemacht, auf WordPress <\/strong>lässt sich dies mithilfe verschiedener Plugins realisieren. Im Folgenden wird die Einbettung <\/strong>einmal für Pages <\/strong>in Thrive Architect<\/strong> beschrieben.<\/p>\n

Zunächst klicken Sie auf das Zahnradsymbol (1)<\/strong> in der rechten Menüleiste, anschließend klicken Sie auf die “Advanced Settings” (2)<\/strong>.<\/p>\n

\"thrive-advanced-settings\"<\/span><\/p>\n

Schließlich müssen Sie auf den Punkt “Custom Scripts”<\/strong> wechseln:<\/p>\n

\"thrive-custom-scripts\"<\/span><\/p>\n

Nun können Sie den Einbettungscode <\/strong>in das Feld “Body (footer) scripts (Before the <\/body> end tag)”<\/strong> einfügen. Nach dem Speichern der Seite ist das Chatbot Widget<\/strong> fertig eingebettet. Auch hier wird das Widget <\/strong>nicht im Editor, sondern nur auf der Live Seite<\/strong> bzw. in der Preview <\/strong>angezeigt.<\/p>\n

Es gilt zu beachten, dass das Widget <\/strong>auf diesem Weg nur auf WordPress Pages<\/strong> – nicht auf Posts<\/strong> – eingefügt werden kann!<\/p>\n

\"thrive-footer-scripts\"<\/span><\/p>\n

Abonniere JETZT unseren Newsletter!<\/p>\n

Verpasse nie wieder neue<\/strong> Beiträge und exklusive Insider-Only-Inhalte!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

In diesem Tutorial werden wir Ihnen zeigen, wie Sie Ihren mit ConvertChat erstellten Chatbot in Ihre Webseite einbinden k\u00f6nnen. Anzeigemodus Bei der Einbindung eines Chatbots auf Ihrer Webseite ist es wichtig zu wissen, wie der Bot auf der Webseite angezeigt werden soll. Bei dem sogenannten Anzeigemodus haben Sie die Wahl zwischen 3 verschiedenen Einstellungen. Diese […]<\/p>\n","protected":false},"author":2,"featured_media":747,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":" %%post_title%% %%sep%% %%sitetitle%%","_seopress_titles_desc":"In diesem Tutorial lernen Sie, wie Sie Ihren Chatbot in Ihre Webseite einbinden k\u00f6nnen. Steigern Sie Ihre Conversions, Leads und Ihren Umsatz mit ConvertChat!","_seopress_robots_index":"","_seopress_analysis_target_kw":"ConvertChat,ConvertTools,Chatbot,einbinden,einbetten,Widget,Inline,Overlay","footnotes":""},"categories":[8],"tags":[],"class_list":["post-679","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-convertchat"],"_links":{"self":[{"href":"https:\/\/profi-tutorials.de\/e-business\/wp-json\/wp\/v2\/posts\/679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/profi-tutorials.de\/e-business\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/profi-tutorials.de\/e-business\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/profi-tutorials.de\/e-business\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/profi-tutorials.de\/e-business\/wp-json\/wp\/v2\/comments?post=679"}],"version-history":[{"count":29,"href":"https:\/\/profi-tutorials.de\/e-business\/wp-json\/wp\/v2\/posts\/679\/revisions"}],"predecessor-version":[{"id":1606,"href":"https:\/\/profi-tutorials.de\/e-business\/wp-json\/wp\/v2\/posts\/679\/revisions\/1606"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/profi-tutorials.de\/e-business\/wp-json\/wp\/v2\/media\/747"}],"wp:attachment":[{"href":"https:\/\/profi-tutorials.de\/e-business\/wp-json\/wp\/v2\/media?parent=679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/profi-tutorials.de\/e-business\/wp-json\/wp\/v2\/categories?post=679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/profi-tutorials.de\/e-business\/wp-json\/wp\/v2\/tags?post=679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}