Web Widget

The Snaps Web Widget allows you to embed rich chat experiences into your site.

Implementation

The Snaps Web Widget is one of the many plugins that we offer within the larger scope of the Snaps SDK - read documentation here

📘

Generating Your Pixel Code

Read the installation sections below to learn about generating your unique pixel code.

Step 1.

Install the SDK Code Snippet into the header or body for any page you want the web bot on.

<script>
!function (e, n, t, s, i, r, a) {
	e.sp = e._snapsPixel = function () {
	  return e[s].q.push(arguments), e.sp
	}, e[s].q = [], e[s].initialize = function () { 
	  return e[s]
	}, e[s].trackEvent = e[s], r = n.createElement(t),
    a = n.getElementsByTagName(t)[0],
    r.async = 1,
    r.src = "https://pixel.snapsmedia.io/sp.js",
    a.parentNode.insertBefore(r, a)
}(window, document, "script", "_snapsPixel");

sp('create', '<MY_CODE>');
</script>

Step 2. Configure the Web Widget Settings

Once you've initialized the code, you can instantiate the web chat. Ensure you are including the channel ID (see below for how to get your channel ID.) You may also pass through any other properties related to the user. These properties will be saved to the user's Snaps profile for later reference.

var pixelCode = '<MY_CODE>';
sp('create', pixelCode);
var webbot_settings = {
  channelId: '<MY_CHANNEL_ID>',
  passThrough: {
		visitorId: 'xyz123',
    userEmail: '[email protected]'
  }
};
sp('plugin:capella', webbot_settings);

Configuration

In our Snaps Platform, you will be able to configure a variety of aspects of your web bot. Learn more about how to style and modify your web chat.

Installation

At the bottom of the web channel form you will find the script that contains your pixel code and channel ID for your web channel. You'll need to save your channel in order to generate your unique pixel code

📘

Unique pixel & channelId Per Channel

Each web channel gets its own unique installation code, so you can have multiple demo and production versions.

Customizing the placement of the web widget on your site

Snaps uses three separate iframes to manage the main chat window, the notification icon, and the open/close button.

These iframes are placed using a set of divs which can be customized with CSS on your page. If you would like to alter the position of these elements, we recommend you work with your web team to update the CSS appropriately, accounting for the positioning and layering of elements on your pages.

The relevant CSS selectors are:

By default, the web widget uses very high z-index values to ensure placement on top of all existing elements. If making adjustments to the default z-indexes, please ensure that each element listed above has a different z-index and that the order follows, i.e. #snaps_capella_notif should always be below #snaps_capella_control.

Additionally, you may adjust the placement of the inner iframe for each div by adding the iframe selector, i.e. #snaps_capella_thread iframe.

Open the chat

There are situations when you may want to open the chat from your page, such as a menu or navigation bar. You can use the chatOpen directive to the SDK to send the user to a particular block by using an acquisition source. Set the ref value to the ID of the acquisition source. You can also pass through user properties.

sp("chatOpen", {
  ref: '0123456789', // create in Snaps UI and point to desired block
  props: {
	userOrderNumber: 'xxxyyyzzz'
  }
});

Here's an example HTML snippet to include this code in a standard link:

<a onclick="sp('chatOpen', { ref: 'refId' })">Chat Now</a>