Custom colours and branding

28 August 2023 05:12

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>