Open from your own button

By default, Smart Assistant displays a floating circular button in the corner of your pages, and your visitors open the assistant by clicking it.

If that button does not fit your design, you can hide it and open the assistant from an element of your own instead: a link in your header, an entry in your navigation menu, a button on a landing page, or any other element you choose.

1. Add the trigger to your page

Add the data-smart-assistant-trigger attribute to the element that should open the assistant. Smart Assistant detects it automatically, so no JavaScript is required on your side.

<!-- Add this anywhere in your page: header, menu, footer... -->

<a href="?smart_assistant_open"
   data-smart-assistant-trigger
   aria-label="Open the assistant">
    Chat with us
</a>

That is all the code you need. When a visitor clicks the element, the assistant opens instantly, without reloading the page.

The attribute needs no value, and you can add it to as many elements as you like on the same page.

2. Ask us to hide the floating button

Hiding the circular button is done in your instance configuration, on the Usizy side. Contact the Usizy team and we will disable it for your instance.

Why the href matters

Using a link with href="?smart_assistant_open" is the recommended approach, even though Smart Assistant opens the assistant without navigating anywhere.

The ?smart_assistant_open URL parameter tells Smart Assistant to open automatically when a page loads. It therefore acts as a safety net: if a visitor clicks your trigger before Smart Assistant has finished loading, the browser follows the link normally, the page reloads with the parameter, and the assistant opens anyway.

Without it, an early click would do nothing at all.

If your trigger is not a link, for example a <button>, the attribute works exactly the same:

<button type="button" data-smart-assistant-trigger>
    Chat with us
</button>

Bear in mind that a <button> has no href, so it loses the safety net described above: a click made before Smart Assistant has loaded does nothing, and the visitor has to click again.

Opening the assistant from your own code

If you need to open the assistant from your own JavaScript, for instance at the end of a form or after a timer, call the open() method on the web component:

document.querySelector('smart-assistant').open()

Single-page applications

Triggers are detected when the click happens, not when the page loads. Elements added to the page later, by a dynamic menu or by a framework re-rendering a section, work without any extra steps.

← Integration examples
Visual parameters →