Basic setup ChatShipper Webwidget

Updated 1 month ago by Joost Rijlaarsdam

Webwidget Installation

Installation of the ChatShipper Web widget in its basic version is simple.

Head over to:

Organisation settings > Integrations > Webwidget, and copy paste your widget code.

ChatAhipper Webwidget install snippet

There is two options:

1. Add snippet to website header

Add the code snippet to your website header. This is the recommended option

<!doctype html><html>
<head>
<script defer src="https://cdn.chatshipper.com/widget_dev/bundle.min.js" data-chatshipper-appid="your_app_id"></script>
</head>
<body>
...your website contents here...
</body></html>
2. Add snippet to GTM

You may also choose to add the code snippet to Google Tagmanager.

If you're using Google Tag Manager (or any other tag management system that removes data attributes), the method above will not work. In that case, add the following code at the end of the body section on your page.

<script>
(
function() {
var
appid='your_app_id';
var
el = document.createElement('script');
el.setAttribute('src', 'https://cdn.chatshipper.com/widget/bundle.min.js');
el.setAttribute('data-chatshipper-appid', appid);
document
.getElementsByTagName('head')[0].appendChild(el);
}
)();
</script>
We recommend option 1. Since we have experienced some Ad blocker plugins blocking GTM. This will negatively impact your conversation numbers.

Basic settings

To customize your Web widget you can:

  1. Change colors
  2. Choose Display style (Button or horizontal tab)
  3. Set button size
  4. Add your custom button icon
  5. Set a custom background image
ChatShipper Webwidget colors

Advanced web widget settings

There is more then 150 variable settings that can be applied to the ChatShipper Webwidget. These can be set through the advanced setting link.

ChatShipper Webwidet advanced settings

It opens a (Json) code editor:

The advanced Webwidget options are documented on our developers docs, please have a look.

We understand that editing these advanced code options may not be your thing. This is why we recommend your contact your chosen ChatShipper Solutions Provider. They are specialists!

Business profile

You can customize your business branding by adding your Business name and logo.

Set them via: organisations setting > configuration > organisation details

Browser support

The ChatShipper Webwidget supports all popular browsers.

Desktop
  • Chrome: Latest and one major version behind
  • Edge: Latest and one major version behind
  • Firefox: Latest and one major version behind
  • Internet Explorer: 11+
  • Safari: Latest and one major version behind
Mobile
  • Stock browser on Android 4.1+
  • Safari on iOS 8+
The Web Messenger is optimized to be rendered within a viewport for mobile devices. User experience may be degraded without a viewport.
<meta name="viewport" content="width=device-width, initial-scale=1" />
Other browsers

Web Messenger is likely compatible with other and older browsers but we only test against the versions above.


How did we do?