Web Messenger

The Web Messenger is a highly customizable messaging widget that can be added to any Web page. Smooch offers a hosted version of the widget. It’s also possible to self-host the widget and fork it to change the appearance, branding, and/or functionality of the widget to suit your needs.

The Smooch Web Messenger is unique in that it allows you to seamlessly move the conversation beyond the browser session to a persistent channel like SMS, Facebook Messenger, or any of our other OTT channels.

Reference

Web SDK repository and reference

Adding Smooch to your site

Web SDK's UI

There are a few ways you can include the Smooch Web Messenger on your web page.

The easiest way to get started is using the Script Tag method, but you can also include it using bower or npm.

Script Tag Method

Step 1: Include the Smooch plugin on your web page

Add the following code towards the end of the body section on your page. Placing it at the end allows the rest of the page to load first.

<script src="https://cdn.smooch.io/smooch.min.js"></script>

Step 2: Initialize Smooch with your new app token

Once Smooch has been included on your web page, you’re almost done. Simply initialize the plugin using this code snippet

<script>
    Smooch.init({appToken: 'your_app_token'});
</script>

npm and browserify

npm install smooch

In your code:

var Smooch = require('smooch');

Smooch.init({appToken: 'your_app_token'});

If you are using NPM 3.0 or above, make sure to also install the required peer dependencies:

npm install babel-polyfill@">=6.9.0 <7.0" babel-runtime@">=6.9.0 <7.0" react@"15.x.x" react-dom@"15.x.x"

bower

bower install smooch

In your code:

Smooch.init({appToken: 'your_app_token'});

RequireJS

Since the library is self-defining its name to be Smooch in the context of RequireJS, you should do the following to use it :


// alias Smooch in your config
require.config({
    "paths": {
        "Smooch": "https://cdn.smooch.io/smooch.min"
    }
});

require(['require', 'Smooch'], function(require){
    var Smooch = require('Smooch');
	// ...
});

// or

define(function(require) {
	var Smooch = require('Smooch');
	// ...
});

Google Tag Manager

You can load Smooch’s web widget through Google Tag Manager. Simply connect to your Google Tag Manager account, go inside your container and follow the guide below.

1. Create a new Tag and give it a cute name like “Smooch”

On your Google Tag Manager dashboard, create a new tag and rename it “Smooch”.

GTM New Tag

2. Select “Custom HTML Tag”

At the end of the product list, click on “Customer HTML Tag” and continue.

3. Paste Smooch’s code snipet

Paste the code below in the suggested text field. Make sure to replace ‘your-app-token’ with your Smooch’s app token.

<script src="https://cdn.smooch.io/smooch.min.js"></script>
<script>
    Smooch.init({ appToken: 'your-app-token'});
</script>

GTM Snippet

4. Select to Fire On “All Pages”

Choose the trigger “All Pages” to fire the initialization of our widget when the page loads.

GTM Fire on

5. Save Tag and Publish

You’re almost there. Save your Tag and don’t forget to publish your changes. You might need to clear the recent the cache and reload your web page to see the widget.

Wordpress

To install Smooch on your Wordpress site, you need to download our plugin and install it through Wordpress.

Download the ZIP from our plugin github page
Connect on your Wordpress dashboard and go on the plugin section
Click on “Add New” and then “Upload Plugin”
Choose the plugin and click on “Install Now”.
In your Wordpress settings, click on “Smooch”. Paste your app token in the appropriate text field.

Ghost

You are wondering how to load our widget on your Ghost blog. First connect to your Ghost dashboard (your-website.com/ghost). Go to the Code Injection menu (on the navigation left bar).

In the Blog Footer section, paste our initialization code.

<script src="https://cdn.smooch.io/smooch.min.js"></script>
<script>
    Smooch.init({ appToken: 'your-app-token'});
</script>

Ghost

And don’t forget to click on Save!

Zendesk Help Center

Zendesk Help Center is a self-service support software that provides a knowledge base for your team and customers.

Follow the instructions below to add Smooch into your Zendesk Help Center:

1. Connect to your Help Center dashboard and customize your theme

On your Zendesk Help Center dashboard, click on the “General” menu and then “Customize design”.

On the newly displayed sidebar, click on “edit theme”.

Then, on the theme edition dashboard, select “footer” on the first dropdown menu.

Paste the code provided below just before the ending footer tag.

<script src="https://cdn.smooch.io/smooch.min.js"></script>
<script>
    Smooch.init({ appToken: 'your-app-token'});
</script>

Zendesk Smooch code

3. Save and publish!

Click save and don’t forget to publish your work.

Alternate Channels

The Web Messenger supports the ability for users to find and reach out to you on any channel you support. In order to offer additional channels, simply integrate with whichever messaging channel you please and it will automatically be added to the list.

Alternate Channels

SMS Page

User linking

If a user starts chatting with you and would like to continue the chat on another messaging channel such as Facebook Messenger, they will have the option to link their Facebook account and continue that same conversation.

These conversations will be merged automatically, allowing you to reply to the customer from the same thread wherever they choose. When you reply to your user, Smooch will intelligently detect which messaging channel they most recently used and make sure that a user doesn’t get spammed with push notifications if they happen to have multiple messaging channels linked.

For example, if a user visits your site and would like to close the tab, they can choose to ‘Send to Messenger’. This will connect their conversation to Facebook Messenger and allow them to close the tab and move on.

Send to Messenger

Customization

Embedded mode

To embed the widget in your existing markup, you need to pass embedded: true when calling Smooch.init. By doing so, you are disabling the auto-rendering mechanism and you will need to call Smooch.render manually. This method accepts a DOM element which will be used as the container where the widget will be rendered.

Smooch.init({
    appToken: 'your_app_token',
    embedded: true
});


Smooch.render(document.getElementById('chat-container'));

Strings customization

Smooch lets you customize any strings it displays by overwriting its keys. Simply add the customText key in your Smooch.init() call and specify new values for the keys used in Smooch. You can find all available keys here. If some text is between {}, or if there is an html tag such as <a>, it needs to stay in your customized text.

For example:

Smooch.init({
    appToken: 'your_app_token',
    customText: {
        headerText: 'How can we help?',
        inputPlaceholder: 'Type a message...',
        sendButtonText: 'Send',
    }
});

Styling the Conversation Interface

The Web Messenger settings page allows for customization of various fields.

Display Style

The Web Messenger can be displayed as a button or as a tab. You can select the style in the web settings of the Smooch dashboard. The default style is the button mode.

With the button style Web Messenger, you have the option of selecting your own button icon. The image must be at least 200 x 200 pixels and must be in either JPG, PNG, or GIF format.

Basic Color Customization

For basic customization of colors, you can set the Brand Color, Conversation Color and Action Color in the web settings of the Smooch dashboard.

The Brand Color customizes the color of the messenger header. It is also used for the color of the button or tab in idle state, as well as the color of the default app icon. If no color is specified, the brand color will default to #65758e.
The Conversation Color customizes the color of customer messages and actions in the footer. If no color is specified, the conversation color will default to #0099ff.
The Action Color changes the appearance of links and buttons in your messages. It is also used for the ‘Send’ button when it is in active state. If no color is specified, the action color will default to #0099ff.

Advanced Customization

For complete control over the styling of the widget, you can use CSS to override the style used by Smooch. You can simply inspect any UI elements and override any class in the widget by targeting #sk-container #sk-wrapper .selector. Our stylesheet only targets #sk-container .selector, it would become less specific than yours.

// To recolor bubbles to orange
#sk-container #sk-wrapper .sk-msg {
    background-color: #ff3333;
}
#sk-container #sk-wrapper .sk-msg::after {
    border-left-color: #ff3333;
}

Sound notification

By default, a sound notification will be played when a new message comes in and the window is not in focus.

To disable this feature, you need add the soundNotificationEnabled option to the Smooch.init call, like this:

Smooch.init({
    appToken: 'your_app_token',
    givenName: 'Cool',
    surname: 'Person',
    soundNotificationEnabled: false // Add this line to your 'Smooch.init' call
});

Web Messenger

Reference

Adding Smooch to your site

Script Tag Method

Step 1: Include the Smooch plugin on your web page

Step 2: Initialize Smooch with your new app token

npm and browserify

bower

RequireJS

Google Tag Manager

1. Create a new Tag and give it a cute name like “Smooch”

2. Select “Custom HTML Tag”

3. Paste Smooch’s code snipet

4. Select to Fire On “All Pages”

5. Save Tag and Publish

Wordpress

Ghost

Zendesk Help Center

1. Connect to your Help Center dashboard and customize your theme

2. Add Smooch javascript code to the footer of your theme

3. Save and publish!

Alternate Channels

User linking

Customization

Embedded mode

Strings customization

Styling the Conversation Interface

Display Style

Basic Color Customization

Advanced Customization

Sound notification