Messaging SDK (V2)

<script>
    !function(o,i,s,c){var a,p,h,u=[],l=[];function e(){var t="You must provide a supported major version.";try{if(!c)throw new Error(t);var e,n="https://sdk.cxengage.net/webchat/2.2.1/",r="serenovawebchat";if((e="string"==typeof this.response?JSON.parse(this.response):this.response).url){var o=i.getElementsByTagName("script")[0],s=i.createElement("script");s.async=!0;var a=c.match(/([0-9]+)\.?([0-9]+)?\.?([0-9]+)?/),p=a&&a[1];if(a&&a[3])s.src=n+r+"."+c+".min.js";else{if(!(1<=p&&e["v"+p]))throw new Error(t);s.src=e["v"+p]}o.parentNode.insertBefore(s,o)}}catch(e){e.message===t&&console.error(e)}}o[s]={init:function(){a=arguments;var t={then:function(e){return l.push({type:"t",next:e}),t},catch:function(e){return l.push({type:"c",next:e}),t}};return t},on:function(){u.push(arguments)},render:function(){p=arguments},destroy:function(){h=arguments}},o.__onWebMessengerHostReady__=function(e){if(delete o.__onWebMessengerHostReady__,o[s]=e,a)for(var t=e.init.apply(e,a),n=0;n<l.length;n++){var r=l[n];t="t"===r.type?t.then(r.next):t.catch(r.next)}p&&e.render.apply(e,p),h&&e.destroy.apply(e,h);for(n=0;n<u.length;n++)e.on.apply(e,u[n])};var t=new XMLHttpRequest;t.addEventListener("load",e),t.open("GET","https://sdk.cxengage.net/webchat/2.2.1/loader.json",!0),t.responseType="json",t.send()}(window,document,"SerenovaWebChat","2");
</script>

<script>
    SerenovaWebChat.init({integrationId: '<integration-id>'}).then(function() {
        // Your code after init is complete
    });
</script>

var initPromise = SerenovaWebChat.init({
    integrationId: '<integration-id>',

    // Leave unspecified for US region (default)
    region: 'eu-1',

    locale: 'en-US',

    customColors: {
        brandColor: '65758e',
        conversationColor: '65758e',
        actionColor: '65758e',
    },

    menuItems: {
        imageUpload: true,
        fileUpload: true,
        shareLocation: true,
    },

    fixedHeader: false,

    customText: {
        actionPaymentCompleted: 'Payment Completed',
        actionPaymentError: 'An error occurred while processing the card. <br> Please try again or use a different card.',
        actionPostbackError: 'An error occurred while processing your action. Please try again.',
        clickToRetry: 'Message not delivered. Click to retry.',
        clickToRetryForm: 'Form not submitted. Click anywhere on the form to retry.',
        connectNotificationSingleText: 'Be notified when you get a reply.',
        conversationListHeaderText: 'My conversations',
        conversationListPreviewAnonymousText: 'Someone',
        conversationListPreviewCarouselText: '{user} sent a message',
        conversationListPreviewFileText: '{user} sent a file',
        conversationListPreviewFormText: '{user} sent a form',
        conversationListPreviewFormResponseText: '{user} filled a form',
        conversationListPreviewImageText: '{user} sent an image',
        conversationListPreviewLocationRequestText: '{user} sent a location request',
        conversationListPreviewUserText: 'You',
        conversationListRelativeTimeJustNow: 'Just now',
        conversationListRelativeTimeMinute: '1 minute ago',
        conversationListRelativeTimeMinutes: '{value} minutes ago',
        conversationListRelativeTimeHour: '1 hour ago',
        conversationListRelativeTimeHours: '{value} hours ago',
        conversationListRelativeTimeYesterday: 'Yesterday',
        conversationListTimestampFormat: 'MM/DD/YY',
        conversationTimestampHeaderFormat: 'MMMM D YYYY, h:mm A',
        couldNotConnect: 'Offline. You will not receive messages.',
        couldNotConnectRetry: 'Reconnecting...',
        couldNotConnectRetrySuccess: "You're back online!",
        couldNotLoadConversations: 'Couldn’t load conversations.',
        fetchHistory: 'Load more',
        fetchingHistory: 'Retrieving history...',
        fileTooLargeError: 'Max file size limit exceeded ({size})',
        fileTypeError: 'Unsupported file type.',
        formErrorInvalidEmail: 'Email is invalid',
        formErrorNoLongerThan: 'Must contain no more than ({characters}) characters',
        formErrorNoShorterThan: 'Must contain at least ({characters}) characters',
        formErrorUnknown: 'This doesn\'t look quite right',
        formFieldSelectPlaceholderFallback: 'Choose one...',
        headerText: 'How can we help?',
        imageClickToReload: 'Click to reload image.',
        imageClickToView: 'Click to view {size} image.',
        imagePreviewNotAvailable: 'Preview not available.',
        inputPlaceholder: 'Type a message...',
        inputPlaceholderBlocked: 'Complete the form above...',
        messageIndicatorTitlePlural: '({count}) New messages',
        messageIndicatorTitleSingular: '({count}) New message',
        messageRelativeTimeDay: '{value}d ago',
        messageRelativeTimeHour: '{value}h ago',
        messageRelativeTimeJustNow: 'Just now',
        messageRelativeTimeMinute: '{value}m ago',
        messageTimestampFormat: 'h:mm A',
        messageDelivered: 'Delivered',
        messageSeen: 'Seen',
        messageSending: 'Sending...',
        newConversationButtonText: 'New Conversation',
        notificationSettingsConnected: 'Connected',
        notificationSettingsConnectedAs: 'Connected as {username}',
        prechatCaptureGreetingText: 'Hi there \nTo start off, we\'d like to know a little bit more about you:',
        prechatCaptureNameLabel: 'Your name',
        prechatCaptureNamePlaceholder: 'Type your name...',
        prechatCaptureEmailLabel: 'Email',
        prechatCaptureEmailPlaceholder: 'name@company.com',
        prechatCaptureConfirmationText: 'Thanks for that! What can we help you with?',
        sendButtonText: 'Send',
        settingsHeaderText: 'Settings',
        syncConversation: 'Sync conversation',
        tapToRetry: 'Message not delivered. Tap to retry.',
        tapToRetryForm: 'Form not submitted. Tap anywhere on the form to retry.',
        uploadDocument: 'File',
        uploadInvalidError: 'Invalid file',
        uploadPhoto: 'Image',
        uploadVirusError: 'A virus was detected in your file and it has been rejected',
        unsupportedMessageType: 'Unsupported message type.',
        unsupportedActionType: 'Unsupported action type.',
    }
}).then(function() {
    // Your code after init is complete
});

initPromise.then(function() {
    // do something
});

// pass it around...

initPromise.then(function() {
    //do something else
});

SerenovaWebChat.open();

SerenovaWebChat.close();

SerenovaWebChat.isOpened();

SerenovaWebChat.destroy();

SerenovaWebChat.sendMessage(
    {
        type: 'text',
        text: 'hello'
    },
    '<conversation-id>'
);

// OR

SerenovaWebChat.sendMessage('hello', '<conversation-id>');

SerenovaWebChat.startTyping('<conversation-id>');

SerenovaWebChat.stopTyping('<conversation-id>');

SerenovaWebChat.updateUser({
    givenName: 'Manually set name', // Set before interaction is created to use as name/contact-point in flow
    metadata: {
        customer: 'Manually set name', // Set before interaction is created to use as name/contact-point in flow
        customDataForFlow: 'example-data' // Set any other data here before interaction be accessable in flow
    },
});

var user = SerenovaWebChat.getUser()

// user object payload
user = {
    id: 'e70b153989345b0e178174b1',
    externalId: 'username',
    signedUpAt: '2019-09-26T14:48:58.167Z',
    hasPaymendInfo: false,
    metadata: {},
    surname: 'Surname',
    givenName: 'Given Name',
    email: 'email@domain.com',
    avatarUrl: 'https://pictureurl.com/avatar_icon.png',
};

SerenovaWebChat.getConversationById('62565b5c2b4039adff80b7fd').then((conversation) => {
    console.log(conversation);
});

// or

SerenovaWebChat.getConversationById().then((currentConversation) => {
    console.log(currentConversation);
});

// Data object
conversation = {
    id: '5aa4d7efdb32b10340db0223',
    lastUpdatedAt: 1581010017.596,
    businessLastRead: 1581010017.596,
    description: 'Conversation description',
    displayName: 'Conversation name',
    iconUrl: 'https://pictureurl.com/conversation_icon.png',
    type: 'sdkGroup',
    participants: [
        {
            id: '5f0cb8222c884d031ec05dd9',
            userId: 'e70b153989345b0e178174b1',
            unreadCount: 0,
            lastRead: 1581010017.596,
        },
    ],
    metadata: {},
    messages: [
        {
            role: 'user',
            userId: 'e70b153989345b0e178174b1',
            displayName: 'Some user',
            id: '5e6022c9cb55158bfd53f845',
            type: 'text',
            received: 1583358665.139,
            text: 'Hello',
            source: {
                type: 'web',
                id: 'c38ae913af7c4ef3800b339ee529c579',
                integrationId: '5d8274d4aa780a5483f0ee56',
            },
        },
        {
            role: 'business',
            displayName: 'Business display name',
            id: '5f0cb834bc8ea9e41b2af269',
            type: 'text',
            received: 1594669108.896,
            text: 'Greetings!',
            source: {
                type: 'slack',
            },
        },
    ],
};

var conversations = SerenovaWebChat.getConversations();
// Your code after receiving the current user's loaded conversations

var conversation = SerenovaWebChat.getDisplayedConversation();

SerenovaWebChat.getMoreConversations().then((nextConversations) => {
    // Your code after receiving the next set of conversations for the user
});

var hasMore = SerenovaWebChat.hasMoreConversations();

if (hasMore) {
    console.log('More conversations available to fetch...');
} else {
    console.log('There are no more conversations remaining for the user');
}

SerenovaWebChat.loadConversation('<conversation-id>');

SerenovaWebChat.updateConversation('<conversation-id>', {
    displayName: 'display name',
    iconUrl: 'https://www.example.png',
    description: 'description',
    metadata: {
        any: 'info',
    },
}).then((updatedConversation) => {
    // Your code after receiving the current user's updated conversation
});

SerenovaWebChat.createConversation({
    displayName: "Friday's Order",
    iconUrl: 'https://www.zen-tacos.com/tacos.png',
    description: 'Order #13377430',
    metadata: {
        isFirstTimeCustomer: true,
    },
    messages: [
        {
            text: 'Hi there! Your order is being prepared: 2 burritos, 4 tacos, 8 churros',
            type: 'text',
        },
    ],
}).then((conversation) => {
    // Your code after receiving the current user's new conversation
});

SerenovaWebChat.markAllAsRead('<conversation-id>');

SerenovaWebChat.setPredefinedMessage(message);

SerenovaWebChat.setDelegate(delegate);

const delegate = {
    beforeDisplay(message, data) {
        if (data.conversation.id === '<my-conversation-id>') {
            message.displayName = 'Acme Blank';
        }

        return message;
    },
    beforeSend(message, data) {
        return message;
    },
    beforePostbackSend(postback, data) {
        return postback;
    }
}

// Passing delegate as an init parameter
SerenovaWebChat.init({
    integrationId: '<integration-id>',
    delegate
});

// Using setDelegate
SerenovaWebChat.init({ integrationId: '<integration-id>' }).then(() => {
    SerenovaWebChat.setDelegate(delegate);
});

// Message object for beforeDisplay and beforeSend delegates

message = {
    id: '5f0cb8226a5b27e41834f8f8',
    displayName: 'username',
    role: 'user',
    userId: 'e70b153989345b0e178174b1',
    avatarUrl: 'https://imageurl.com/avatar.png',
    type: 'text',
    received: 1594669090.954,
    source: {
        type: 'web',
        id: 'e91e070a9c4e4eb7b73fb0a376b340c7',
        integrationId: '5d72af033fbb2c05c87d5d94',
    },
    metadata: {
        isHidden: true,
    },
};

// Data object
data = {
    conversation: {
        id: '<conversation-id>',
        lastUpdatedAt: 1581010017.596,
        type: 'sdkGroup',
        participants: [
            {
                id: '<participant-id>',
                userId: '<user-id>',
                unreadCount: 0,
                lastRead: 1581010017.596,
            },
        ],
        metadata: {},
    },
};

SerenovaWebChat.init({
    integrationId: '<integration-id>',
    delegate: {
        beforeDisplay(message, data) {
            if (data.conversation.id === '<conversation-id>' && message.metadata && message.metadata.isHidden) {
                return null;
            }

            return message;
        }
    }
});

SerenovaWebChat.init({
    integrationId: '<integration-id>'
    delegate: {
        beforeSend(message, data) {
            if (data.conversation.id === '<conversation-id>') {
                message.metadata = {
                    any: 'info'
                };
            }

            return message;
        }
    }
});

SerenovaWebChat.init({
   integrationId: '<integration-id>',
   delegate: {
       beforePostbackSend(postback) {
           if (data.conversation.id === '<conversation-id>') {
               postback.metadata = {
                   any: 'info'
               };
           }

           return postback;
       }
   }
});

SerenovaWebChat.init({
    integrationId: '<integration-id>',
    delegate: {
        onInvalidAuth() {
            return '<my-new-auth-token>';
        }
    }
});

// This event triggers when init completes successfully... Be sure to bind before calling init!
SerenovaWebChat.on('ready', function(){
    console.log('the init has completed!');
});

SerenovaWebChat.init(...).then(function() {
    // Your code after init is complete
});

// This event triggers when the widget is destroyed.
SerenovaWebChat.on('destroy', function(){
    console.log('the widget is destroyed!');
});

SerenovaWebChat.destroy();

// This event triggers when a participant is added to a conversation
SerenovaWebChat.on('participant:added', function(participant, data) {
    console.log(`A participant was added to conversation ${data.conversation.id}: `, participant);
});

// This event triggers when a participant is removed from a conversation
SerenovaWebChat.on('participant:removed', function(participant, data) {
    console.log(`A participant was removed from conversation ${data.conversation.id}: `, participant);
});

// This event triggers when a conversation is added
SerenovaWebChat.on('conversation:added', function(participants, data) {
    console.log(`Conversation ${data.conversation.id} was added with following participants: `, participants);
});

// This event triggers when a participant in a sdkGroup chat reads a message
SerenovaWebChat.on('conversation:read', function(payload, data) {
    if (payload.role === 'business') {
        console.log(`Conversation ${data.conversation.id} was read by the business`);
    } else if (payload.role === 'user') {
        console.log(`Conversation ${data.conversation.id} was read by userId: ${payload.userId}`);
    }
});

// Payload and data objects. If the conversation was read by the business, the userId property will not exist
payload = {
    userId: '<user-id>',
    lastRead: 1581010017.596,
    role: 'user'
}

data = {
    conversation: {
        id: '<conversation-id>'
    }
}

// This event triggers when a conversation is removed
SerenovaWebChat.on('conversation:removed', function(data) {
    console.log(`Conversation ${data.conversation.id} was removed`);
});

// data object
data = {
    conversation: {
        id: '<conversation-id>'
    }
}

// This event triggers when the user receives a message
SerenovaWebChat.on('message:received', function(message, data) {
    console.log(`The user received a message in conversation ${data.conversation.id}: `, message);
});

// data object
data = {
    conversation: {
        id: '<conversation-id>'
    }
}

// This event triggers when the user sends a message
SerenovaWebChat.on('message:sent', function(message, data) {
    console.log(`The user sent a message in conversation ${data.conversation.id}: `, message);
});

// data object
data = {
    conversation: {
        id: '<conversation-id>'
    }
}

// This event triggers when a message was added to the conversation
SerenovaWebChat.on('message', function(message, data) {
    console.log(`A message was added in the conversation ${data.conversation.id}: `, message);
});

// data object
data = {
    conversation: {
        id: '<conversation-id>'
    }
}

// This event triggers when the number of unread messages changes
SerenovaWebChat.on('unreadCount', function(unreadCount, data) {
    console.log(`the number of unread messages was updated for conversation ${data.conversation.id}:`, unreadCount);
});

// data object
data = {
    conversation: {
        id: '<conversation-id>'
    }
}

// This event triggers when the widget is opened
SerenovaWebChat.on('widget:opened', function() {
    console.log('Widget is opened!');
});

// This event triggers when the widget is closed
SerenovaWebChat.on('widget:closed', function() {
    console.log('Widget is closed!');
});

// This event triggers when the codes emits debug information
SerenovaWebChat.on('log:debug', function (e) {
    console.log('Timestamp:', e.timestamp); // (Float) Date.now() when it was emitted
    console.log('Message:', e.message); // (String) Message being logged
    console.log('Data:', e.data); // (Object) Extra details to be logged
});

// This event triggers when an active connection has been established for the first time,
// or when the connection has been re-established after a `disconnected` or `reconnecting` event.
SerenovaWebChat.on('connected', function(data) {
    console.log('Connected with conversation', data.conversation.id);
});

// This event triggers when an active connection is lost
// While disconnected, the client will not be able to recieve messages or load a conversation
SerenovaWebChat.on('disconnected', function(data) {
    console.log('Disonnected with conversation', data.conversation.id);
});

// data object
data = {
    conversation: {
        id: '<conversation-id>',
    },
};

// This event triggers when an active connection is lost and there is an attempt to reconnect
// While reconnecting, the client will not be able to receive messages or load a conversation
SerenovaWebChat.on('reconnecting', function (data) {
    console.log('Reconnecting with conversation', data.conversation.id);
});

/ data object
data = {
    conversation: {
        id: '<conversation-id>',
    },
};

// This event triggers when the business starts typing. The associated conversation is passed in the argument.
SerenovaWebChat.on('typing:start', function(data) {
    console.log(`${data.name} started typing!`, data.conversation.id);
});

// If the name and avatarUrl for the typing user is known it will be available as properties in the data object

// Data object
data = {
    conversation: {
        id: '<conversation-id>',
    },
    avatarUrl: 'http://path.com/to/avatar-url-of-user',
    name: 'Name of Typing User',
}

// This event triggers when the business stops typing. The associated conversation is passed in the argument.
SerenovaWebChat.on('typing:stop', function(data) {
    console.log(`${data.name} stopped typing!`, data.conversation.id);
});

// data object
data = {
    conversation: {
        id: '<conversation-id>'
    }
}

SerenovaWebChat.init({
    integrationId: '<integration-id>',
    embedded: true
}).then(() => {
    SerenovaWebChat.render(document.getElementById('chat-container'));
});

<meta
    http-equiv="Content-Security-Policy"
    content="
    connect-src
        wss://*.smooch.io
        https://*.smooch.io;
    font-src
        https://*.smooch.io;
    script-src
        https://*.smooch.io;
    style-src
        https://*.smooch.io;
    img-src
        blob:
        https://*.smooch.io;"
/>