# 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](/docs/dixamessenger/web/interfaces/initpayload#hidetoggler)
- [horizontalPadding](/docs/dixamessenger/web/interfaces/initpayload#horizontalpadding)
- [language](/docs/dixamessenger/web/interfaces/initpayload#language)
- [messengerToken](/docs/dixamessenger/web/interfaces/initpayload#messengertoken)
- [position](/docs/dixamessenger/web/interfaces/initpayload#position)
- [showWidgetCloseButton](/docs/dixamessenger/web/interfaces/initpayload#showwidgetclosebutton)
- [userIdentity](/docs/dixamessenger/web/interfaces/initpayload#useridentity)
- [verticalPadding](/docs/dixamessenger/web/interfaces/initpayload#verticalpadding)
- [disableSentryIntegration](/docs/dixamessenger/web/interfaces/initpayload#disablesentryintegration)
- [nonce](/docs/dixamessenger/web/interfaces/initpayload#nonce)
- [fullscreenOffsets](/docs/dixamessenger/web/interfaces/initpayload#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`](/docs/dixamessenger/web/commands#setposition-parameters)

`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.


```ts
// 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.


```ts
_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.


```ts
// 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.


```ts
// 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.


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

### nonce

• `Optional` **nonce**: `string`

If your website has implemented [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 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.


```html
<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'`).**


```ts
_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).