The Customise Agent is organised into five tabs:
Brand it — set your assistant’s name, logo, and greeting on the Branding tab.
Style it — match your colors and fonts on the Theme tab.
Position it — choose where the widget appears on the Layout tab.
Choose features — enable the capabilities you want on the Features tab.
Install it — copy the snippet from the Plugin tab and add it to your site.
The Branding tab is where you give your chat assistant its identity — its name, avatar, the greeting guests see first, and the starter prompts that help them begin. A Live Widget Preview on the right updates as you type, so you always know exactly what your guests will see.
Bot Name is the only required field. It appears at the top of the widget and is how guests refer to your assistant.
In the Bot Name field, enter a name (for example, Grevon).
In the Greeting Title field, enter the first message guests should see — something welcoming.
Watch the Live Widget Preview update as you type.
Two images shape how your assistant looks: the Bot Logo (the avatar beside your assistant’s chat replies) and the FAB Icon (the icon on the floating button that opens the chat).
Click the upload area under Bot Logo or FAB Icon.
Choose an image from your computer. PNG, JPG, GIF, WebP, and SVG files are supported.
The counter confirms your image is attached.
Starter Suggestions are the tappable prompts guests see the moment they open the chat. You can add up to 10.
In the suggestion field, enter a prompt (for example, Show me rooms with a sea view).
Click the + button, or press Enter, to add it.
The suggestion appears as a chip below the field; the counter shows how many you have added.
To remove a suggestion, click its chip.
When you have made a change, the Save button in the top-right becomes active.
Click Save.
A confirmation appears, warning that changes affect the live chatbot for all users.
Click Save to publish, or Cancel to keep editing.
Your branding shows up in two places on your website:
A floating button (using your FAB Icon) sits in the corner of the page.
When a guest taps it, the chat widget opens with your Bot Name at the top, your Greeting Title as the first message, your Bot Logo beside replies, and your Starter Suggestions ready to tap.
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.
There are five colors you can set. Each has a color swatch (click it to pick visually) and a hex field (type an exact value such as #29BBAF).
Below the colors, set your typography:
Font family — pick a typeface from the dropdown.
Base font size — set the overall text size.
Save Theme (top-right) publishes your palette and fonts to the live widget. It stays disabled until you make a change. Reset to Default restores the original Grevon theme.
The Layout tab controls where the chat appears on your website and how big it is — both the floating button and the chat window itself.
Every field takes a standard CSS size value, so you can be as precise as you like:
rem or px for fixed distances (for example, 1.5rem or 24px).
% for a portion of the screen (for example, 45%).
svh for a portion of the screen height (for example, 100svh for full height).
0 to pin to an edge, or leave a field blank to let it position automatically.
Controls the floating action button — the round button guests tap to open the chat. Set its distance from the Top, Bottom, Left, and Right edges of the screen. Set only the edges you need (for example, Top + Right to pin it to the top-right corner).
How the chat looks when it first opens as a side panel. Set its Width and Height, plus its Top, Right, Bottom, and Left offsets. For example, a 70% width with 100svh height gives a tall panel covering the right portion of the screen.
How the chat looks when a guest expands it to full view. Same fields — Width, Height, and the four offsets. A 100% width with 100svh height makes the chat fill the screen.
Click Save (top-right) to apply. The button stays disabled until you change a value.
The Features tab lets you switch individual chat capabilities on or off. Turn on only what fits your property — the widget adapts to your choices.
Each feature has a toggle. Switch it on (teal) to enable, or off to hide it from guests.
Find the feature you want to change.
Click its toggle — on shows teal, off shows grey.
Click Save (top-right) to apply.
Once you have branded and configured your assistant, the Plugin 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.
Open the Plugin tab in the Customise Agent, then follow these three steps in order:
Copy the script tag and paste it into the <head> section of your website’s HTML. This loads the widget engine.
Copy the CSS link tag and paste it into the <head> section, below the script tag from Step 1. This loads the widget’s visual styles.
Copy the <upswing-chat> tag and paste it into the <body> of your HTML, in the location where you want the widget to appear. For site-wide placement, add it to a shared header or template file so it appears on every page.
You only need to install the widget once. After that, any changes you make in the Branding, Theme, Layout, or Features tabs take effect on your live website automatically — you do not need to update or reinstall the code.