Initialization Payload

This interface describes the payload for the init method.

messengerToken is the only mandatory value, other values can be passed to customize the widget.

Table of contents

Properties

• hideToggler
• horizontalPadding
• language
• messengerToken
• position
• showWidgetCloseButton
• userIdentity
• verticalPadding
• disableSentryIntegration
• nonce
• fullscreenOffsets

horizontalPadding

• Optional horizontalPadding: number

horizontalPadding can be used to set the horizontal position of the widget and its toggler on the screen The expected number is in pixels and it is relative to the edge of screen.

verticalPadding

• Optional verticalPadding: number

verticalPadding can be used to set the vertical position of the widget and its toggler on the screen The expected number is in pixels and it is relative to the edge of screen.

position

• Optional position: WidgetPositionSimple

position can be used to set the position of the widget and its toggler on the screen If not present the widget defaults to bottomRight

hideToggler

• Optional hideToggler: boolean

The default view of the widget is composed by the widget itself and a floating toggler button used to show or hide the widget.

It is possible to hide the default toggler button and implement a custom one using the setWidgetOpen method described in the [[DixaMessenger]].

This option is used to hide the default toggler. If it is set to true, the default toggler button will be hidden. If it is set to false or it not set, the toggler will be displayed.

// Inits the widget without the default toggler button
_dixa_.invoke('init', {
  messengerToken: '[YOUR_MESSENGER_TOKEN]',
  hideToggler: true,
});

// Inits the widget with the default toggler button
_dixa_.invoke('init', { messengerToken: '[YOUR_MESSENGER_TOKEN]' });
// Or
_dixa_.invoke('init', {
  messengerToken: '[YOUR_MESSENGER_TOKEN]',
  hideToggler: false,
});

language

• Optional language: string

Used to set widget's language. The language must be provided using two letters code (using the ISO 639-1 standard).

To find the list of available languages, go to the Messenger Settings in the Agent Interface and check the list of languages in the General tab.

Widget sets its locale:

• Explicitly when initializing widget using language property

  Provided language will be compared with the list of available languages that are set in the Messenger Settings. Choosing a language that is not available will have no effect and the widget will fallback to the implicit flow below.

• Implicitly

  Widget will parse the user's preferred languages provided by the browser and it will set the widget’s language to the first available language, falling back to the default if no match is found.

Where available language are the ones set to active in the agent interface and default is the selected default language.

NB! Selected locale is reported to the backend, where it can be used for routing and other functionalities.

_dixa_.invoke('init', {
  messengerToken: '[YOUR_MESSENGER_TOKEN]',
  language: 'da',
});

messengerToken

• messengerToken: string

The messengerToken for the widget. It needs to be set as the messengerToken of the widget created in the Agent Interface.

showWidgetCloseButton

• Optional showWidgetCloseButton: boolean

If it is set to true, a button for closing the widget will be displayed inside the widget itself.

The default view of the widget does not have a button for hiding the widget, so it can be hidden only using the default toggler or a custom one. Implementing a custom toggler means to maintains a local state and calling the setWidgetOpen method with either the true or false value.

This option can be used to create a custom button to shows the widget without maintaining a state, and make possible to hide the widget using the button inside the widget.

// Inits the widget without the default toggler button and with a close button inside
_dixa_.invoke('init', {
  messengerToken: '[YOUR_MESSENGER_TOKEN]',
  hideToggler: true,
  showWidgetCloseButton: true,
});

userIdentity

• Optional userIdentity: UserIdentity

The end-user of the widget can be authenticated in different ways (described in the [[UserIdentity]] type). If not specified, the user will be considered anonymous.

// Anonymous user
_dixa_.invoke('init', { messengerToken: '[YOUR_MESSENGER_TOKEN]' });

// Anonymous user
dixa_.invoke('init', {
  messengerToken: '[YOUR_MESSENGER_TOKEN]',
  userIdentity: { type: 'anonymous' },
});

// Claimed user
_dixa_.invoke('init', {
  messengerToken: '[YOUR_MESSENGER_TOKEN]',
  userIdentity: {
    type: 'claim',
    name: 'John Doe',
    email: 'john.doe@example.com',
  },
});

disableSentryIntegration

• Optional disableSentryIntegration: boolean

Disables the Sentry integration. Sentry is an open-source error tracking tool that helps developers monitor and fix crashes in real time.

_dixa_.invoke('init', {
  messengerToken: '[YOUR_MESSENGER_TOKEN]',
  disableSentryIntegration: true,
});

nonce

• Optional nonce: string

If your website has implemented Content Security Policy and you want to embed Dixa Messenger, you have to configure nonce property which messenger will use to create necessary <style> tags. Please note that you will have to add nonce attribute to the initialization <script> tag as well. Among others CSP values you will have to add the following - Content-Security-Policy: default-src 'self'; connect-src 'self' <https://*.dixa.io> wss://*.dixa.io <https://*.sentry.io;> script-src 'self' 'nonce-randomBase64EncodedString' <https://*.dixa.io;> style-src 'self' 'nonce-randomBase64EncodedString'; img-src 'self' <https://dixa-uploads.s3.eu-west-1.amazonaws.com;> frame-src 'self' <https://*.dixa.io.>, where nonce-randomBase64EncodedString is the nonce that you generate.

<script nonce="randomBase64EncodedString">
  (function (w, d, s) {
    if (w._dixa_) return;
    w._dixa_ = {
      invoke: function (method, payload) {
        w._dixa_.pendingCalls = w._dixa_.pendingCalls || [];
        w._dixa_.pendingCalls.push([method, payload]);
      },
      addListener: function (event, listener) {
        w._dixa_.pendingAddListenerCalls =
          w._dixa_.pendingAddListenerCalls || [];
        w._dixa_.pendingAddListenerCalls.push([event, listener]);
      },
    };
    s = d.createElement('script');
    s.type = 'text/javascript';
    s.setAttribute('charset', 'utf-8');
    s.async = true;
    s.src = '<http://localhost:8081/bootstrap.js>';
    var before = d.getElementsByTagName('script')[0];
    before.parentNode.insertBefore(s, before);
  })(window, document);

  _dixa_.invoke('init', {
    messengerToken: '[YOUR_MESSENGER_TOKEN]',
    nonce: 'randomBase64EncodedString',
  });
</script>

fullscreenOffsets

• Optional fullscreenOffsets: FullscreenOffsets

To set the offsets for the fullscreen mode, you can use the fullscreenOffsets property. This property is an object with the following properties:

• top : Top offset number or string
• right : Right offset number or string
• bottom : Bottom offset number or string
• left : Left offset number or string

Numeric values are interpreted as pixels, and string values are interpreted as is (e.g. '10px', '10%' or '10vh').

_dixa_.invoke('init', {
  messengerToken: '[YOUR_MESSENGER_TOKEN]',
  fullscreenOffsets: { top: 10, right: '5%', bottom: '1vh', left: '10px' },
});

Note: The fullscreenOffsets property is only effective when the messenger is fullscreened (small screen size).