How to embed your AI Widget

Content

Embedding

Embedding your AI Widget is easier than you think. Regardless of the content management system you are using you need to follow these easy steps first.

Step 1: Log into your account. Go to your Widget Library if you made your own widget or go to the general Widget Library and find the widget to embed. Click on Configure & Embed to open the Style Options. Here you can choose the colour, width and the border style of your widget.

Step 2: If you chose your theme you can copy the code by clicking on embed. Copy the <script> code. Add the code between the <head> and </head> section of your website.

Step 3: Now you can copy the <div> code and paste it to the spot on your landing page where you would like to display the magic. Now you are all done and ready to have your website users try it out!

Embedding your AI Widget in WordPress

Enbedding your widget in Wordpress is fairly easy.

Step 1: Open the page where you want your widget to be displayed.

Step 2: Add an html field to your page where you want the widget to fit.

Step 3: Copy both lines of code, script and div, into a html field.

If you are using Elementor to build your page content, go to your Elements Section and choose the HTML widget. Now you can paste the code of the AI Widget. Move the html element around in the Elementor to change the place of your AI Widget.

Alternatively, you can adjust your theme:

1. Access Your WordPress Dashboard

2. Access the Theme Customizer: In the WordPress dashboard, go to “Appearance” on the left-hand menu. Depending on your theme, you may see “Customize” or “Theme Customizer.” Click on this option.

4. Find the “Additional CSS” or “Custom Code” Section. The location of the code placement may vary depending on your theme. Look for a section named “Additional CSS,” “Custom Code,” “Header,” or similar.

5. Now paste the code into the field and save the changes.

Embedding your AI Widget in HubSpot

You can add code to the header section of your website using the Custom HTML module in HubSpot.

Step 1: Go to the HubSpot Dashboard and log-in to your account.

Step 2: If you want to add code to a specific page, navigate to that page by going to Marketing > Website > Website Pages and select the page you want to edit. If you want to add code to a template that is used across multiple pages, you can go to Marketing > Website > Templates and select the template you want to edit.

Step 3: For a specific page, click the “Edit” button to open the page editor. For a template, click the “Edit” button to open the template editor.

Step 4: In the page or template editor, you can add a Custom HTML module where you want to insert your code. To add a module, click on the “+” icon to open the module library, search for “Custom HTML,” and then drag and drop it to the desired location in the header section.

Step 5: Once you’ve added the Custom HTML module, click on it to open the editor. In the editor, you can paste yourAI Widget code. You can also add a name for the module for reference.

Step 6: After adding your code, make sure to save your changes. Finally, click the “Publish” button to make the changes live on your website.

Additionally, if you have access to the Design Manager in HubSpot, you can also add code to the header across multiple pages by editing the global header template. This is useful for adding code that should appear on all pages of your website.

Embedding your AI Widget in Umbraco

In Umbraco, you can add code to the header section of your website by modifying the template associated with your document types. Here are the general steps to add code to the header section:

Step 1: Log in to the Umbraco backoffice using your credentials.

Step 2: Navigate to settings and templates.

Step 3: Modify the template for your document type adding directly your code to the <head> section.

Step 4: After adding your code, save the changes and publish them if necessary. This will make the code changes live on your website.

Step 5: Now copy the second line of code and add it to the custom html section of the page you want to display the widget on.