Web Messenger

The Morph Web messenger is a customisable messaging widget which can be added on any web-page. It supports rich conversations with elements like buttons, gallery, attachments and quick replies.

Adding Morph to your website

You can add the Morph web messenger on your website by simply following these steps.

Step 1: Include Morph plugin on your page

Add the following code at the end of the body tag of your page. Placing it at the end allows your website page to load first.

<script src="https://app.morph.ai/livechat/morph.js"></script>

Step 2:

After including the Morph app simply initialize the widget using the following code snippet. This will place the web messenger widget on the right bottom corner of your webpage with default styling and configuration.

Morph.init({'appToken': 'YOUR-APP-TOKEN'});

Customising Web Messenger

The Morph Web messenger can be customised as per the theme of your website. This is done by passing options while initializing the chat.

Sample customisation

Morph.init({
        appToken: 'YOUR_APP_TOKEN',
        theme: {
            color: '',        //The main color of web messenger plugin. Default: #496CEF
            textColor: '',    //Text color for elements with background as your theme color. Default: #FFFFFF
            logo: ''          //Image URL of the logo to show on web messenger header.
        },
        customText: {
            headerText: '',        // Header text. Default: "How can we help?"
            introductionText: ''   // Displayed below Header text. Default: "We're here to talk, so ask us 
        },
        onLoad: function(){        // onLoad function is called when the livechat plugin is successfully loaded
            this.open();             // You can access the methods of "Morph" object from "this" variable. Read below for supported methods
        },
        captureData: {
            email: true,            // Ask user for email before starting the chat
            phoneNumber: true       // Ask user for phone number before starting the chat
        },
        user: {                    // You can send user info while initializing Morph Web messenger, This will help you identify web users.
            name: 'Murphy Botter',      // Name of user
            email: '[email protected]'        // Email of User
        }
    });

Methods

Morph Web Messenger provides the following public methods to control its behaviour through javascript.

Open the Web Messenger

Morph.open()

Opens the web messenger. Stays open if called when it is already in open state.

Close the Web Messenger

Morph.close()

Closes the web messenger. Stays closed if called when it is already in closed state.

Remove the Web Messenger

Morph.remove()

Removes the web messenger from your web page. You can call Morph.init() again after removing Web messenger.