Overview
The Dixa Messenger Web Widget is a widget that can be embedded into your website. This document contains information about how to set up the widget, the APIs that are exposed by the widget and events dispatched by it.
Setup
To embed the Widget in a website, copy the code found in Settings -> Messenger -> Cogwheel icon on the setup tab and put it at the end of the <head> tag of the pages that should show the widget.
The embed code is like the following one (where <YOUR_DIXA_MESSENGER_TOKEN> is replaced with an actual Messenger Token):
<script>
(function (w, d, s) {
if (w._dixa_) return;
w._dixa_ = {
invoke: function (m, a) {
w._dixa_.pendingCalls = w._dixa_.pendingCalls || [];
w._dixa_.pendingCalls.push([m, a]);
},
};
s = d.createElement("script");
s.type = "text/javascript";
s.setAttribute("charset", "utf-8");
s.async = true;
s.src = "https://messenger.dixa.io/bootstrap.js";
var before = d.getElementsByTagName("script")[0];
before.parentNode.insertBefore(s, before);
})(window, document);
_dixa_.invoke("init", { messengerToken: "<YOUR_DIXA_MESSENGER_TOKEN>" }); // <- init is called here
</script>The snippet will load all the needed scripts and prepares the widget for initialization. Notice on the last line, the init method being called. This is what tells the widget to render itself. Once the init method see init payload is called it will create an iframe, initialize the widget and show the button for showing/hiding the widget.
Initialization
You can customize the initialization of the widget by passing options to the init method:
_dixa_.invoke('init', {
messengerToken: '<YOUR_DIXA_MESSENGER_TOKEN>',
position: 'bottomLeft',
showWidgetCloseButton: true,
language: 'en',
//other options...
});To see all the available options for init please refer to InitPayload.
Next steps
To know what else is possible with the messenger, checkout:
- Authentication to learn more about how to authenticate users.
- Commands which allow you to manipulate the widget programmatically.
- Events tell you about the events emitted by the widget.
- Types List of the most notable type definitions.
- Promise-based API to learn how to control the widget programmatically using the new promise-based API (BETA).