To add a button or a menu navigation item on your site that will open the Xeno chatbox, you have 3 choices:
To automatically open the Xeno chatbox when someone lands on a page, please add “#chat-open” to the end of your URL.
Here is an example:
https://your-website.com/products#chat-open
To automatically open the Xeno chatbox Meetings Card, when someone lands on a page, please add “#chat-open-meetings” to the end of your URL.
https://your-website.com/products#chat-open-meetings
Just add any of the following terms to an URL where Xeno is deployed to point to a specific Xeno Card:
Or simply in a DOM element:
<a href="https://your-website.com/products#chat-open">My Website</a>
To open the Xeno chatbox from a DOM element, you just have to add the xeno-open-widget
class to the element.
Here is an example:
<button type="button" class="xeno-open-widget">Click Me!</button>
<span class="xeno-open-widget">Click Me!</span>
You can also use this syntax to open a specific Card:
<button type="button" class="xeno-open-widget" data-view="meetings">Click Me!</button>
<span class="xeno-open-widget" data-view="meetings">Click Me!</span>
You can also use the Xeno API functions show()
and hide()
that allows you to open/close the chat.
Here is an example:
document.getElementById('my-button').addEventListener("click", function(event) {
_xeno.show();
});