Widget Customization

Customize the appearance and behaviour of your Omniops chat widget.

Overview

The Omniops chat widget can be fully customized to match your brand. All customization is done through the dashboard — no code changes required.

Appearance

Colours

Customize 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

Choose where the widget appears:

  • Bottom-right (default)
  • Bottom-left

Size

  • Chat bubble size — small, medium, or large
  • Chat window width — adjustable from 320px to 480px

Branding

Upload your logo to appear in the chat header. Recommended size: 120x40px, PNG or SVG.

Welcome Message

Set a custom greeting that appears when a customer opens the chat:

  • Default: "Hi! How can I help you today?"
  • Customize per language if multi-language support is enabled

Agent Name

Set the name that appears as the AI assistant's identity. This should match your brand voice — for example, "Support Team" or a specific character name.

Behaviour

Auto-Open

Configure when the widget should open automatically:

  • Disabled — customer must click the bubble
  • After delay — opens after a set number of seconds on the page
  • On scroll — opens when the customer scrolls past a threshold

Operating Hours

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

Advanced

Custom CSS

For advanced styling, you can inject custom CSS that targets widget elements. Access this via Settings → Widget → Advanced.

Data Attributes

Pass additional context to the widget via data attributes on the embed script:

<script
  src="https://omniops.co.uk/embed.js"
  data-widget-id="your-widget-id"
  data-page-context="product"
  async
></script>