> For the complete documentation index, see [llms.txt](https://developers.socialboards.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.socialboards.com/docs/apis/support-widget/installation.md).

# Installation

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.

## Installation

Open the pages where you want to implement the widget, and add the following code close to the end body tag (\</body>).

```
<script type="text/javascript">
    var scriptElement = document.createElement("script");
    scriptElement.async = 1;
    scriptElement.src = "https://magicwidget.socialboards.com/magic-widget.js";
    document.body.appendChild(scriptElement);
</script>
```

### Initialize the widget

In the example above we have appended the script tag to the body with async enabled. This is recommended so that the rendering of your website is not blocked by the script. However, you will need to know when the script is done downloading and the widget is ready. This can be done by adding the following callback function to the window object which the widget will invoke when it's ready.

```javascript
 window.magicWidgetAsyncInit = function() {
  // magicwidget is ready!
 }
```

The widget requires a configuration object to initialize.

| Parameter  | Obligatory | Type    | Description                                               |
| ---------- | ---------- | ------- | --------------------------------------------------------- |
| community  | Yes        | String  | Name of your Socialboards Inbox                           |
| moduleMask | Yes        | Integer | A bit mask to enable modules. 1 = FAQ, 2 = Chat, 4= Form. |
| widgetId   | No         | Integer | The ID of your widget                                     |

```

window.magicWidgetAsyncInit = function() {

    var configuration = {
        community: 'COMMUNITY_NAME',
        moduleMask: 7,
        widgetId: 'WIDGET_ID'
    }; 
    
    magicWidget.initializeAsync(configuration)
        .then(function() {
            // initialization was successfull!
        })
        .catch(function(error) {
            // an error occured while initializing.
        });
}
```

##


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://developers.socialboards.com/docs/apis/support-widget/installation.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.