Installing the widget

Installing the widget

Once you've branded and configured your assistant, the Embed Code tab gives you everything you need to add it to your website — in three short steps. No coding experience required; you copy three snippets and paste them into your site's HTML.

You'll find it under Playground → Embed Code in the left sidebar.

 

The Embed Code tab — three copy-paste steps

 

Your code is unique to you. The snippets on this tab already include your account's settings (your organization ID, icon, colors, and layout). Always copy them from your own Embed Code tab rather than typing them by hand — and use the Copy button on each step to avoid mistakes.

 

Step 1 — Add the JavaScript

Copy the script snippet and paste it inside your site's HTML <head> section. It looks like this:

 

<script type="module" src="https://.../build/chat-ai.esm.js"></script>

 

Step 2 — Add the Stylesheet

Copy the stylesheet snippet and paste it inside the <head>, just below the script from Step 1:

 

<link rel="stylesheet" href="https://.../build/chat-ai.css">

 

Step 3 — Add the Chat Element

Copy the chat element and place it inside your <body>, where you'd like the widget to appear. It carries all your settings as attributes:

 

<upswing-chat

  org-id="your-organization-id"

  fab-icon="..."

  fab-top="1.5rem"

  fab-right="45%"

  ...

></upswing-chat>

 

Save and publish your website, and the chat widget will appear.

Keeping your widget up to date

 

The embed code reflects your saved configuration. When you change settings on the Branding, Theme, Layout, or Features tabs, this code updates automatically — and your live widget picks up the changes without you re-pasting anything. You only need to install the snippets once.

 

Tips

•        Add it once, on every page. Most websites let you paste the <head> snippets into a shared header/template so the widget appears site-wide.

•        Using a site builder? Squarespace, Wix, WordPress, Webflow and similar tools all have a place to paste custom HTML or embed code — look for "Custom Code", "Code Injection", or an "Embed/HTML" block.

•        Not sure where your HTML is? Send these three steps to whoever manages your website; they're standard and take only a few minutes.

 

•        Branding — name, logo, greeting, and starter suggestions

•        Theme — colors and fonts

•        Layout — position and size

    • Related Articles

    • How to Customise Your Chat Widget Theme

      Summary The Theme tab in the Playground lets you control the colour palette and typography of your Grevon AI chat widget. You can match the widget’s visual style to your website or brand guidelines by setting primary, secondary, and accent colours, ...

    • How to Customise Your Chat Widget Branding

      How to Customise Your Chat Widget Branding Summary The Branding tab in the Playground lets you personalise the look and feel of your Grevon AI chat widget to match your property or brand identity. You can set your bot’s name, upload logos, write a ...

    • How to Customise Your Chat Widget Layout

      Summary The Layout tab in the Playground lets you control where the chat widget appears on your website and how large it is in both Compact mode (a side panel) and Expanded mode (full chat view). You can also control the exact position of the ...

    • Playground

      The Playground is where you design, preview, and install your AI chat assistant — the widget your guests interact with on your website. Everything you change here can be previewed live before it goes out, and the install code updates automatically to ...

    • Theme

      The Theme tab controls how your chat widget looks — its colors and fonts. As with Branding, a Live Widget Preview on the right updates instantly, so you can see your palette come together before you save. You'll find it under Playground → Theme in ...