Basic Usage

Once Heyo is installed, you can control the widget using JavaScript. All functions are available on the global HEYO object.

TL:DR:

• show()/hide() controls whether the widget is visible at all on the page
• open()/close()/toggle() controls whether the chat window is expanded or collapsed

It's that easy!

Opening and Closing the chat

Control when the chat window appears:

HEYO.open(); // Open the chat window
HEYO.close(); // Close the chat window
HEYO.toggle(); // Toggle between open and closed

If you have enabled "Hide when offline" in your Project Settings, HEYO.show() and HEYO.open() will be disabled when all agents are offline. However, you can override this by passing { force: true } as a parameter:

// Override the "hide when offline" setting and show the widget anyway
HEYO.open({ force: true });

Showing and Hiding the whole widget

Control the widget's visibility on the page:

HEYO.hide(); // Hide the widget completely
HEYO.show(); // Show the widget
HEYO.show({ force: true }); // Show even when agents are offline

Checking Status

You can also check if the chat is currently open:

const isChatOpen = HEYO.isOpen();

if (isChatOpen) console.log('Chat is open');
else console.log('Chat is closed');

Real-World Examples

Open chat from a button:

<button onclick="HEYO.open()">Contact Support</button>

Hide widget on specific pages:

const pathName = window.location.pathname;
if (pathName === '/checkout') HEYO.hide();

Show chat after user scrolls:

window.addEventListener('scroll', () => {
    if (window.scrollY > 500) {
        HEYO.show();
    }
});

That's all you need to get started! Next, learn how to identify your users to provide better support.