InSite Web Agent Appearance and Branding

  • Updated

Customize your InSite agent so it feels like part of your website, not a separate tool. This article walks through the three configuration tabs — Settings, Design, and Greeting — so you can control how the agent looks, what it says, and what visitors see when they open it.

Changes are saved as a draft while you work. Your live agent does not change until you publish.

Quick Reference (Advanced Users) - Click to Expand
  • Settings controls the header and footer text shown in the chat window.
  • Design controls colors, widget image, font, and widget position.
  • Greeting controls the opening message, suggested prompts, and input placeholder text.
  • Changes are saved as a draft until you publish.
  • Use the static preview for appearance checks and the interactive preview to test the real visitor experience.
Try it like this: Set your agent name in the header, add a privacy policy link in the footer, match the widget color to your brand, then create a short welcome message with suggested prompts such as Book a demo or Ask about pricing.

Settings Tab

Start in the Settings tab if you want to control the text shown at the top and bottom of the chat window. This is a good place to make the agent feel branded and trustworthy before you move on to visual styling.

Header Text

The header text appears at the top of the chat interface. Most use this for the agent name, product name, or a short label that helps visitors understand who they are chatting with.

Keep it short and easy to recognize, for example:

  • Act-On Support Assistant
  • Product Help

Header text is plain text only. HTML is not supported here.

Footer Text

The footer text appears at the bottom of the chat UI. This area supports HTML, so you can add formatted text and links.

Use the footer for information visitors may want before they start chatting, such as:

  • A link to your privacy policy
  • A short compliance note
  • A link to support or contact information

This is especially useful if your agent collects or processes visitor information. Adding a privacy policy link helps set expectations clearly.


Design Tab

Use the Design tab to control how the agent looks on your site. This includes the chat window itself and the widget button that visitors click to open it.

As you make updates, the static preview refreshes so you can quickly check the appearance.

Note: The static preview is useful for visual checks. To test how the agent actually behaves, use the interactive preview.

Primary Color

Enter a hex value to set the main color used in your agent. This is the fastest way to align the agent with your brand.

The chat UI automatically applies related color offsets where needed and chooses an accessible text color based on your selection. You do not need to set those separately.

If you already have brand guidelines, use the same primary button or accent color from your website for a more consistent experience.

Widget Image

The widget image appears inside the round launcher button on your website. This is often the first thing a visitor notices before opening the chat.

You can:

  • Choose from two pre-built images included with InSite
  • Select a custom image from your image library or account logos

If you use a custom image, use a square JPEG or PNG that is at least 200 x 200 pixels for the best result.

A logo or branded icon usually works best here. Choose something simple that stays clear at small sizes.

Font

Choose the font used throughout the chat UI. The selected font applies to both visitor and agent messages.

If your website already uses one of the available fonts, choose the same one here to make the transition into chat feel more natural.

Widget Position

Choose whether the widget appears in the bottom left or bottom right corner of your website pages.

Think about where other fixed elements already appear on your site, such as cookie notices, accessibility tools, or live chat buttons. Pick the side with the least visual conflict.

Note: The widget and chat interface are rendered in the page at the following z-index.


Greeting Tab

The Greeting tab controls the first impression visitors get when they open the chat. Use it to welcome them, set expectations, and make it easier to start the conversation.

This tab also includes a static preview of the chat.

Initial Greeting

The initial greeting appears in the main content area of the chat UI when a visitor opens the agent for the first time.

Use this space to do three things:

  • Welcome the visitor
  • Explain what the agent can help with
  • Set the tone for the conversation

This field supports simple HTML tags, so you can add light formatting if needed.

A strong greeting is short, specific, and useful. For example:

  • Hi there. I can help you find product information, pricing details, or the right next step.
  • Welcome. Ask me about features, integrations, or booking a demo.

Suggested Messages

You can add up to 4 suggested messages. These appear as clickable buttons below the initial greeting.

Suggested messages help visitors start faster and reduce the chance that they leave without engaging. They work best when they reflect common visitor goals.

Keep them short and action-oriented, such as:

  • Book a demo
  • Ask about pricing
  • See integrations
  • Talk to sales

Input Placeholder Text

The placeholder text appears inside the chat input field before a visitor starts typing.

Use it to prompt the kind of question or request you want visitors to make. This can help guide better conversations and reduce hesitation.

Good examples include:

  • Ask a question
  • How can we help?
  • Tell us what you’re looking for

Previewing and Publishing Your Changes

Before publishing, review your changes in both preview modes.

Use the Design tab’s static preview for a quick visual check. Confirm that the color, image, font, and layout match your website branding.

Then use the interactive preview to test the real experience, including the opening greeting, suggested messages, and overall chat flow.

When everything looks right, publish your changes and make the agent visible to visitors on your website.

A final check before publishing:

  • Does the header clearly identify the agent?
  • Does the footer include any required privacy or compliance links?
  • Does the widget match your brand?
  • Does the greeting make it obvious what visitors can do next?

Was this article helpful?

Have more questions? Submit a request