# Configuration options

## Introduction

The widget supports a rich set of configuration options which allow you to customize the widgets appearance and behavior. The structure of the configuration object follows the logical structure of the widget.

```javascript
var configuration = {
    community: 'COMMUNITY_NAME',
    moduleMask: 7,
    widgetId: 'WIDGET_ID',
    
    messenger: {}, // This object will configure the messenger window
    launcher: {} // This object will configure the launcher 
};

```

| Attribute  | Type    | Description                                                                                                                                                |
| ---------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Community  | String  | The name of you inbox as written in the url                                                                                                                |
| Modulemask | Integer | A bit mask to enable modules. 1 = FAQ, 2 = Chat, 4= Form                                                                                                   |
| WidgetID   | Integer | The ID of the widget you wish to launch                                                                                                                    |
| initModule | Integer | Controls which module to load initially. Homepage = 0, FAQ = 1, Chat = 2, Forms = 3                                                                        |
| Language   | String  | Set the language of the entire widget. Supports Norwegian ("nb"), Swedish ("sv"), Danish ("da"), Finnish ("fi") and English ("en"). Defaults to Norwegian. |

## Messenger Object

These attributes will modify the behaviour and appearance of the messenger.

```
messenger: {
    right: '20px',
    bottom: '85px',
    animationDirection: 'bottom-to-top',
    translate: '20px',
    
    // configure the home page
    home: {
        logoDimensions: { width: '150px', height: '50px' },
        chatLink: {
            order: 1,
            startChatText: 'Start Chat-Samtale',
            continueChatText: 'Fortsett Chat samtale'
        },
        faqLink: {
            order: 0,
            text: 'Ofte stilte spørsmål' //optional
        },
        formLink: {
            order: 2,
            text: 'Send e-post via skjema' //optional
        }
    },
    
    // configure the FAQ page
    faq: {
        faqCategoryId: null,
        faqName: 'demo',
    },
 
    // configure the contact page
    form: {
        formName: 'demo'
    },
 
    // configure the chat
    chat: {
        authenticationMask: 2,
        customFields: { someData: 'value' },
        contactInfo: { userName: 'John Doe', userEmail: 'john@doe.com' },
        queueBackgroundColor: 'white',
        queueFontSizeRem: '1rem',
        userMessageBackgroundColor: '#fefefe',
        agentMessageBackgroundColor: '#fefefe',
        botMessageBackgroundColor: '#ffffff'
    }

```

#### Attributes

| Attribute             | Obligatory | Type   | Description                             |
| --------------------- | ---------- | ------ | --------------------------------------- |
| right/left/bottom/top | No         | String | Absolute position of the messenger      |
| animationDirection    | No         | String | Direction of the load animation         |
| translate             | No         | String | Number of pixels for the load animation |

### Home Sub-object

The "home" page is the first page that loads after opening the widget. With these parameters, you can control the order of each module, and override the text settings for each of them. You can also adjust the logo which appears at the top of your messenger. All the parameters are optional.

### Chat Sub-object

Control which authentication methods that will be presented to the user, and override default style settings.

| Attribute                   | Type    | Description                                                                                         |
| --------------------------- | ------- | --------------------------------------------------------------------------------------------------- |
| authenticationMask          | Integer | A bit mask for enabling authentication methods. 1 = Anonymous, 2 = Email, 4 = Facebook, 8 = Google. |
| agentMessageBackgroundColor | String  | Defines the background color of the agent chat bubbles.                                             |
| botMessageBackgroundColor   | String  | Defines the background color of bot chat bubbles.                                                   |
| queueMessageBackgroundColor | String  | Defines the background color of the queue element.                                                  |
| queueMessageFontSizeRem     | String  | Set the font size in Rem of the queue element.                                                      |

### FAQ Sub-object

Attributes optional. Overrides the default FAQ parameters.

| Attribute     | Type    | Description                                     |
| ------------- | ------- | ----------------------------------------------- |
| faqCategoryId | Integer | Restricts FAQ articles from a specific category |
| faqName       | String  | Restricts FAQ articles from a specific FAQ      |

### Form Sub-object

Optional. Used to specify which web-form that will be loaded into the messenger.

| Attribute | Type   | Description                    |
| --------- | ------ | ------------------------------ |
| formName  | String | Defines which web-form to use. |

## Launcher Object

These attributes will modify the behavior of the launcher. Control where the launcher should appear on the screen, and replace the default launcher icons with your own icons. Should you wish to implement your own launcher, you then simply need to set **enabled** to false.

```
launcher: {
    enabled: true,
    height: '45px',
    width: '45px',
    right: '20px',
    bottom: '5px',
    launchIcon: 'https://socialboardsbproduction.blob.core.windows.net/123/1029879c-8f6f-4371-ae15-fbe4110931f4.png',
    dismissIcon: 'https://socialboardsbproduction.blob.core.windows.net/123/69327153-a772-4a43-a357-be3b97da0424.png'
}
```

## Methods

Loading the JavaScript library provides an MagicWidget JavaScript object that responds to a few methods. These allow you to update users without a page refresh and interact with the messenger window.

### Show or hide the messenger

To launch the messenger from other elements on your website, use the launchAsync method. To hide the chat, use the dismissAsync() method.

```
 magicWidget.launchAsync();
 magicWidget.dismissAsync();
```

You can subscribe to the launch state of the widget as shown below.

```
magicWidget.isLaunched$.subscribe(isLaunched => {
    console.log('widget is launched: ' + isLaunched);
});
```

This example shows how a given element is used to control the messenger.

```
    window.magicWidgetAsyncInit = function() {

        let isLaunched = false;

        function toggle() {

            if (isLaunched) {
                magicWidget.dismissAsync();
            } else {                        
                magicWidget.launchAsync();
            }

            isLaunched = !isLaunched;
        }

        magicWidget.initializeAsync(o)
            .then(function() { 

                var toggler = document.getElementById("mw-toggler");

                toggler.addEventListener("click", toggle);
                toggler.addEventListener("touchend", toggle);

                magicWidget.isLaunched$.subscribe(value => {
                    console.log('widget is launched: ' + value);
                });

             })
            .catch(function() { console.log('boo!') });
    }
```

### Log in Chat users automatically

If you also know the name and email of your chat user, you can use the setContactInfo function to skip the login page.

```
magicWidget.setContactInfo({ userName: "John Doe", userEmail: "john@email.com" })
```

### Adding custom data to the ticket

Attach any extra information to the ticket by using the setCustomFields function.

```
magicWidget.setCustomFields({ isLoggedIn: true })
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.socialboards.com/docs/apis/support-widget/configuration-options.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.