How to add a ChatGPT AI support agent to Hostinger Horizons

You want to embed your custom trained AI support agent in your Hostinger Horizons website page. Here's how to add an AI support agent to Hostinger Horizons with SiteSpeakAI.

Hostinger Horizons is a drag-and-drop website builder designed for ease of use, particularly for beginners. It focuses on creating visually appealing, mobile-responsive websites quickly, without needing coding knowledge. It offers a range of templates, customizable blocks, and integrated features like SEO tools and a blog. It’s positioned as a simpler alternative to more complex website builders like Wix or Squarespace, and is tightly integrated with Hostinger’s hosting services.

Website URL: https://horizons.hostinger.com/

Add your AI support agent to your Hostinger Horizons website

In SiteSpeakAI

Log into your SiteSpeakAI account and select your agent from the dropdown menu at the top, click on the Install Agent section in the sidebar, select the Javascript tab and then click on the Copy Code button to copy your agent code snippet.

In Hostinger Horizons

1. Log into your Hostinger Horizons account and on the dashboard, select Websites and click on Edit website to start editing your website

2. On the website editor page, click on Code to edit the website code files

Please note: We are going to add your AI support agent snippet to your website by means of editing one of the code files. The file we are going to edit is the index.html which we all know is quite an important file and could mess up your website if care is no taken properly during editing. This is not for the fainthearted so you will have to be careful when editing these files. In our case we are only going to edit the index.html file and insert the chatbot snippet just below the closing </body> tag. We suggest you make a backup of the index.html file before you make any changes to the file. You can do this by copying the index.html file contents and saving it to an offline file on your computer. If something goes wrong you can then just replace the messed up contents with the original.

3. Select the index.html file, Insert your snippet just below the </body> tag and click on Save

4. Click on Preview to preview you website page. This will show the agent button on the normal editor preview page

5. Click on Open preview in new tab to see a proper display of your AI support agent

6. Your AI support agent button will now be displayed on your Hostinger Horizons website page

7. If you click on the button it will display the AI support agent dialogue

Your AI support agent has now been added to your Hostinger Horizons website and your visitors/customers can start interacting with it!