# Web inbox widget

[Web Message Inbox](/developer/guides/message-inbox/web-message-inbox/) being integrated into your website increases conversions drastically. A ready-to-use **Web Inbox Widget** is out of the box subscribed to all methods needed to communicate with users. Just integrate the widget into your website and customize its appearance to fit your brand.

## Prerequisites

To integrate Message Inbox for websites, please follow the [guide](/developer/guides/message-inbox/web-message-inbox/).

## Integrating widget

When initializing Pushwoosh WebSDK, add the `inboxWidget` parameter:

```txt title="Example"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);
```

### Trigger

To render the widget, you should specify a **trigger element** for the widget. Any DOM-element on the page could be the trigger. Specify its ID as “pwInbox” or assign any custom ID to the `triggerId` parameter when initializing SDK.\
When WebSDK is initialized, the unread messages badge displays on the trigger element. Once the trigger element is tapped, the widget appears on the page.

<img src="/web-push-notifications-web-inbox-widget-1.webp" alt=""/>

### Positioning

By default, the widget is located in the opposite direction from the screen border closest to the trigger element.\
You can set the widget’s position through configuration params:

```txt title="Example"
Pushwoosh.push(['init', {

  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    position: 'top'
  }
}]);
```

By default, the `inboxWidget` should be placed before the closing \</body> tag.\
Render the widget anywhere on the page as shown in the example below:

```txt title="Example"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {

    enable: true,
    triggerId: 'pwInbox',
    appendTo: '.widget-parent-element-class'
  }
}]);
```

Search for a parent element is performed by querySelector, so it needs clear specification of a class, id, or element.

## Customizing widget

### Customizing texts

To customize widget text, add `emptyInboxTitle` and `emptyInboxText` parameters:

```txt title="Example"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    title: 'Inbox',                                 // widget title
    emptyInboxTitle: 'You\'re all caught up',       // empty inbox widget title
    emptyInboxText: 'There are no new messages. Stay tuned!'    // empty inbox widget text
  }
}]);
```

The result looks like this:

<img src="/web-push-notifications-web-inbox-widget-2.webp" alt=""/>

### Customizing appearance

To customize the widget's **appearance**, use the following parameters:

```txt title="Example"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    bgColor: '#ffffff',         // widget background
    borderColor: 'transparent', // widget border color
    borderRadius: 4,            // widget border radius (px)
    widgetWidth: 350,           // widget width (px)
    zIndex: 100                 // z-index
  }
}]);
```

**Unread messages count badge** can be customized as follows:

```txt title="Example"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // badge color
    badgeTextColor: '#ffffff'   // badge text color
  }
}]);
```

To customize **text properties**, add the following code:

```txt title="Example"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // text color
    fontFamily: 'Helvetica, Arial, sans-serif', // font
    messageTitleColor: '#7a7a7a',               // messages title color
    timeTextColor: '#c4c4c4',                   // timestamp text color
    emptyInboxTitleColor: '#333333',            // empty inbox title color
    emptyInboxTextColor: '#7a7a7a'              // empty inbox text color
  }
}]);
```

Lastly, you can specify the **icon for empty inbox**:

```txt title="Example"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png'   // URL path to an icon
  }
}]);
```

## API

To open or close the widget, use the following API method:

```txt title="Example"
Pushwoosh.pwinboxWidget.toggle(open?: boolean);
```