Install Your
Imatera AI Widget

Your Imatera AI widget is ready to add to your website — a fully branded, advisor‑powered experience that helps visitors explore destinations, ask questions, and engage with your expertise 24/7. This guide walks you through installing the widget on any platform, including Webflow, Wix, Squarespace, WordPress, Shopify, Travefy, and Nexion. You’ll also find mobile tips, design recommendations, and troubleshooting steps to ensure your widget looks polished and performs beautifully on every device.

‍

Australian couple
on Sydney harbor

How To Guide

Your Imatera AI widget or Travel Prompt is ready to add to your website. You don’t need any technical background to install it — if you can copy and paste, you can do this. This guide walks you through everything step-by-step and works for all major website builders like Webflow, Wix, Squarespace, WordPress, Shopify, GoDaddy, Showit, Travefy, and Nexion.

You will receive your unique Imatera widget code or Travel Prompt code separately. Every advisor gets their own code, so simply use the one sent to you. It is only designed for your website.

1. Before You Install (Simple but Important)

These quick tips help your widget look clean and professional on every device:

  • Place the widget inside a normal section or block. Avoid fancy layouts like grids or flexboxes — they can squish or cut off the widget on mobile.
  • Add a background color (white or light grey) to the section. This helps the rounded corners show up on phones.
  • Make sure “Overflow” is set to Visible. Some website builders hide parts of the widget unless this is changed.
  • Leave the height as-is. The height is set so the widget doesn’t wiggle or bounce. If you want it taller, 700px or 800px are safe options.

2. Where EXACTLY to Paste Your Code (For People Who Open HTML Mode)

If you switch your website editor into “HTML mode,” you may see a lot of code that looks confusing. Don’t worry — you don’t need to understand any of it.

Here’s the simple rule:

Paste your Imatera code exactly where you want the widget to appear on your page — usually between two sections or paragraphs.

What NOT to do (in plain English)

Do NOT paste your widget code inside any of the following:

  • Code blocks — these look like <div class="something"> with lots of code inside.
  • Script tags — these look like <script> ... </script> and are used for JavaScript.
  • Style tags — these look like <style> ... </style> and control fonts, colors, and layout.

In simple terms: If you see something that starts with < and ends with > and has more code inside it, don’t paste your widget inside it.

A visual example

<div class="section"> ...your page content... </div> <!-- PASTE YOUR IMATERA WIDGET CODE HERE --> <div class="section"> ...more page content... </div>

If you’re unsure, the safest option is to scroll to the very bottom of the HTML and paste it there. It will still work perfectly.

3. Installation Instructions by Platform

Follow the steps for your website builder below.

Webflow

  1. Add a new Section.
  2. Add a Container or Div Block inside it.
  3. Give the section a white or light grey background.
  4. Drag in an “Embed” element.
  5. Paste your Imatera code.
  6. Publish your site.

Wix

  1. Click “Add” → “Embed Code” → “Custom Embeds” → “Embed HTML”.
  2. Paste your Imatera code.
  3. Set width to 100%.
  4. Set height to around 650px.
  5. Add a background color behind the section.

Squarespace

  1. Add a “Code Block”.
  2. Paste your Imatera code.
  3. Stretch the block to full width.
  4. Give the section a background color.

WordPress

Elementor:

  1. Drag in an “HTML” widget.
  2. Paste your Imatera code.
  3. Give the column a background color.

Gutenberg:

  1. Add a “Custom HTML” block.
  2. Paste your Imatera code.

Shopify

  1. Go to “Online Store” → “Pages”.
  2. Edit your page and switch to HTML mode.
  3. Paste your Imatera code.

GoDaddy

  1. Add a new Section.
  2. Add an “HTML Embed” block.
  3. Paste your Imatera code.
  4. Give the section a background color.

Showit

  1. Add an “Embed Code” box.
  2. Paste your Imatera code.
  3. Set the height to around 650px.
  4. Add a background color behind it.

Travefy

Travefy itineraries don’t allow widgets, but Travefy websites do.

  1. Go to your Travefy Website Editor.
  2. Add a “Custom HTML” block.
  3. Paste your Imatera code.

Nexion Agent Profiler / AgentMate

  1. Open your Agent Profiler.
  2. Find the “Custom HTML” area.
  3. Paste your Imatera code.

4. Troubleshooting (Simple Fixes)

The border isn’t showing on my phone.
This is normal on some templates. Just give the section a background color (white or light grey). The rounded corners will appear again.

The widget looks cut off.
Make sure the container’s “Overflow” setting is set to “Visible”.

There’s a big empty space above or below the widget.
Reduce the padding on the section. Every builder has padding controls.

Does this work on non-secure (HTTP) sites?
Yes — the widget works on both HTTP and HTTPS websites.

Will this slow down my site?
No. The widget loads only when someone scrolls to it, so it doesn’t affect your page speed.

5. Need Help?

If you get stuck or something doesn’t look right, just email support@imatera.tech. We’re happy to help you get everything set up.