Custom colours and branding

You can customise the branding of your chat widget, including colours, business name and icon, and the background image of your widget.

Property Type Description
brandColor String (hex code)

The colour used for:

  • The message header at the top of the chat widget. 
  • The chat widget button or tab when idle.
  • The default app icon.

Defaults to #657583. Do not include the '#' at the start of the hex code.

conversationColor String (hex code)

The colour used for:

  • The user's message bubbles.
  • Actions in the chat widget footer.

Defaults to #0099ff. Do not include the '#' at the start of the hex code.

actionColor String (hex code)

The colour used for:

  • Links in chat message bubbles.
  • Button messages
  • The 'Send' button, when the button is active.

Defaults to #0099ff. Do not include the '#' at the start of the hex code.

backgroundImageUrl String

The URL of the image you want to use as a background. The image will be displayed full-size and tiled using the following CSS:

background-image: url('https://myBackgroundURL.png');
businessName String

Text to display at the top of the chat as the business name. If this is not defined, it falls back to the app name.

businessIconUrl String

The URL of the icon to use as the business icon. If this is not specified, it will fall back to the app icon.

Image must be:

  • JPG, PNG or GIF file format.
  • at least 200 x 200 pixels.
<script>
const options = {
integrationId: '<integration Id>',
businessName: 'Business Incorporated',
businessIconUrl: 'https://mydomain.com/myBusinessLogo.png',
backgroundImageUrl: 'https://mydomain.com/chatBackgroundImage.png',
brandColor: '6B818C',
conversationColor: '08415C',
actionColor: 'CC2936',
},

ingeniousai.init(options).then();
</script>
Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.