Want to change how your chat app looks on your website? This article explains all of the options available for customizing your Gia chat bot, including button color, heading text, greeting text, screen position, and more.
You can access these customization options by clicking into the Customize tab. If you need more guidance, please start with our article on how to create a chat bot or how to customize one.
Display Type Options
On your chat app's Customize tab, you'll see that the first section is called Display Type.
In the Display Type section, you can click the radio button to choose between two display options for chat:
- Button Opens Popup (Floating): With this setting, your chat box will appear as a button that floats in a lower corner of your site. The user can click any time to expand the chat.
- Auto Popup (Floating): With this setting, your chat box will only appear when the user mouses away from your website as if to leave. This style of popup is also called "exit intent."
For much more explanation and guidance, view some examples of site tool display types. (The third display type, embedded, is not possible for chat.)
App Event Steps
The second section on the Customize tab is called App Event Steps, and it's where you can fine-tune the look and feel of your Gia chat bot app.
The options for App Event Steps will vary slightly depending on which of the two display types you have chosen.
Button Opens Popup vs. Auto Popup
The main difference between the two display types is this: If your Chat app is set to display as Button Opens Popup (Floating), then your app will include a step for "Start Button," as shown below.
If you have instead chosen Auto Popup (Floating), then there will be no Start Button panel (as the app pops up automatically rather than offering a start button).
Editing the Start Button
If your Chat is set to the "Button Opens Popup" display type, then you can edit the start button by clicking the blue pencil next to "Start Button."
On the Start Button editing page (shown in the GIF below), you can make edits to the:
The standard best practice for screen position is bottom right. We recommend leaving your Chat app there unless you have a specific reason not to (for example, you have important text that you don't want to be hidden by the floating chat button).
Editing the Chat Panels
Unlike the Start Button panel that only appears for Button Opens Popup, Chat Panels appear for both display types. Just like the Start Button panel, you can edit these panels by simply clicking the blue pencil.
On the Chat Panel editing page (shown in the GIF below), you can make edits to the:
When changing the color of your chat app, be sure to keep readability in mind. There should be high contrast between the background color and the text color, so users of all ages can read it easily.
Previewing as You Edit
As you make edits to your Chat Start Button or Chat Panels, they'll display in real time. However, you can also click the "Preview" button in the upper right-hand corner to preview your chat app in another tab of your browser.
Viewing the preview in this way has the benefit of showing you how the app actually works, as demonstrated in the GIF below.
After you have finished customizing your Chat app and saved your changes, they'll appear immediately from the frontend of your website. You do not need to do anything else!
However, if this is a brand-new Chat app that hasn't yet been added to your website, then the next step is do that. Learn how to add a site tool to your website here.