Docs

Customizing Appearance

Change the widget style, color, size and position to match your brand.

You can customize your widget's main appearance in the Dashboard.

However, if there are time where you need to change the widget's appearance only in specific instances, you can use the configure() method.

For example, you can show the agent card on the landing page, but show a small bubble in your app's dashboard to avoid taking too much space

The functions below works the same way with the HTML script tag and the JS SDK.

Available options

You have access to the following options:

HEYO.configure({
    widgetColor: '#10b981',
    widgetStyle: 'bubble',
    widgetPosition: 'right',
    widgetSize: 'medium',
});

widgetStyle

string

Widget style appearance. Options: bubble or agent-card.

widgetPosition

string

Widget position on screen. Options: left or right.

widgetSize

string

Widget size. Options: small, medium, or large.

widgetColor

string

Widget color. Accepts hex codes, RGB values, or color names.

Widget Styles

Change the style of the widget with the widgetStyle option.

bubble: Simple floating button
agent-card: Agent info with avatar and status

HEYO.configure({ widgetStyle: 'bubble' });

Widget Colors

Match your brand colors:

HEYO.configure({ widgetColor: '#ef4444' });

You can use hex color codes, RGB or color names.

Widget Sizes

Adjust the widget size:

small: Smaller size
medium: Default size
large: Larger size (only available for bubble style)

HEYO.configure({ widgetSize: 'small' });

Widget Position

Place the widget on either side:

left: Bottom-left corner
right: Bottom-right corner

HEYO.configure({ widgetPosition: 'right' });

Real-World Examples

Different styles per page:

// Landing page - prominent agent card
if (window.location.pathname === '/') {
    HEYO.configure({
        widgetStyle: 'agent-card',
        widgetSize: 'large',
        widgetPosition: 'right',
    });
}

// Dashboard - minimal bubble
if (window.location.pathname.includes('/dashboard')) {
    HEYO.configure({
        widgetStyle: 'bubble',
        widgetSize: 'small',
        widgetPosition: 'left',
    });
}

A/B testing different styles:

// Random A/B test
const showAgentCard = Math.random() > 0.5;

HEYO.configure({
    widgetStyle: showAgentCard ? 'agent-card' : 'bubble',
});

That's it! You now know how to make Heyo match your website's design perfectly.

Identifying Users

Link conversations to your users and provide context to your support team.

Initialization Options

Configure advanced options when loading the Heyo widget.