Widget Customisation

Customise the appearance and behaviour of your Omniops chat widget.

Overview

The Omniops chat widget can be customised to match your brand. Your brand colours are set from the dashboard and apply immediately. A few more display options are set on the embed snippet, and more dashboard controls are rolling out.

Appearance

Colours

Customise the widget's colour scheme:

  • Primary colour — the main accent colour for the chat bubble and header
  • Background — chat window background colour
  • Text colours — message text and metadata colours

Position

The widget appears in the bottom-right by default. You can move it to the bottom-left with the data-position attribute on the embed snippet (see Data Attributes below), and a dashboard control for this is rolling out.

Size

  • Chat window width — adjustable between 300px and 600px

Branding

Upload your logo to appear in the chat header. Recommended size: 120x40px, PNG or SVG. This dashboard control is rolling out.

Welcome Message

Set a custom greeting that appears when a customer opens the chat. The default is "Hi! How can I help you today?" You can set your own with the data-welcome-message attribute on the embed snippet, and a dashboard control for this is rolling out.

Agent Name

Set the name that appears in the chat header. This should match your brand — for example, "Support Team" or your business name.

Behaviour

Auto-Open

Configure whether the widget opens on its own:

  • Disabled — the customer clicks the bubble to open it
  • After delay — opens after a set number of seconds on the page

A small prompt bubble can also appear once a customer scrolls down the page, nudging them to start a chat without opening the full window.

Operating Hours

Set business hours under Settings → Availability to show different messages outside working hours. When offline, the widget can collect contact details for follow-up.

Advanced

Advanced: The following options are for users who are comfortable editing website code, or who have a developer who can help.

Custom CSS

For advanced styling, you can inject custom CSS that targets widget elements. You set this alongside the embed and installation options.

Data Attributes

Set widget options directly on the embed script using data attributes:

<script
  src="https://omniops.co.uk/embed.js"
  data-position="bottom-left"
  data-primary-color="#0F0F0F"
  data-welcome-message="Hi! How can I help you today?"
  async
></script>