Web Messenger SDK

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

<script>
    !function(e,n,t,r){function s(){try{var e;if((e="string"==typeof this.response?JSON.parse(this.response):this.response).url){var t=n.getElementsByTagName("script")[0],r=n.createElement("script");r.async=!0,r.src=e.url,t.parentNode.insertBefore(r,t)}}catch(e){}}var o,p,a,i=[],c=[];e[t]={init:function(){o=arguments;var e={then:function(n){return c.push({type:"t",next:n}),e},catch:function(n){return c.push({type:"c",next:n}),e}};return e},on:function(){i.push(arguments)},render:function(){p=arguments},destroy:function(){a=arguments}},e.__onWebMessengerHostReady__=function(n){if(delete e.__onWebMessengerHostReady__,e[t]=n,o)for(var r=n.init.apply(n,o),s=0;s<c.length;s++){var u=c[s];r="t"===u.type?r.then(u.next):r.catch(u.next)}p&&n.render.apply(n,p),a&&n.destroy.apply(n,a);for(s=0;s<i.length;s++)n.on.apply(n,i[s])};var u=new XMLHttpRequest;u.addEventListener("load",s),u.open("GET","https://{{YOUR_DOMAIN_NAME}}/loader.json",!0),u.responseType="json",u.send()}(window,document,"AvMessagingSdk");
</script>

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

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

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

    // For authenticated mode
    jwt: 'your_jwt',
    userId: 'user_id',
    locale: 'en-US',

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

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

    fixedIntroPane: false,

    prechatCapture: {
        enabled: true,
        enableEmailLinking: true,
        fields: [
            {
                type: 'email',
                name: 'email',
                label: 'Email',
                placeholder: '[email protected]'
            },
            {
                type: 'text',
                name: 'company-website',
                label: 'Company website',
                placeholder: 'mycompany.com'
            },
            {
                type: 'select',
                name: 'company-size',
                label: 'Company size',
                placeholder: 'Choose a number...',
                options: [
                    {
                        name: '1-10',
                        label: '1-10 employees'
                    },
                    {
                        name: '11-50',
                        label: '11-50 employees'
                    },
                    {
                        name: '51+',
                        label: '51+ employees'
                    }
                ]
            }
        ]
    },

    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.',
        connectNotificationText: 'Give us a way to reach out:',
        connectNotificationSingleText: 'Be notified when you get a reply.',
        connectNotificationSingleButtonText: 'Turn on <name> notifications',
        connectNotificationOthersText: 'others',
        conversationTimestampHeaderFormat: 'MMMM D YYYY, h:mm A',
        couldNotConnect: 'Couldn\'t connect. You can {retry}. '
        couldNotConnectInner: 'retry connecting now'
        couldNotConnectWithRetry: 'Couldn\'t connect. We\'ll keep retrying, or you can {retry}.',
        couldNotConnectWithRetryInner: 'try now',
        emailChangeAddress: 'Change my email',
        emailDescription: 'To be notified by email when you get a reply, enter your email address.',
        emailFieldLabel: 'Your email',
        emailFieldPlaceholder: 'Your email address',
        emailFormButton: 'Continue',
        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...',
        frontendEmailChannelDescription: 'To talk to us using email just send a message to our email address and we\'ll reply shortly:',
        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...',
        introAppText: 'Message us below or from your favorite app.',
        introductionText: 'We\'re here to talk, so ask us anything!',
        lineChannelDescription: 'To talk to us using LINE, scan this QR code using the LINE app and send us a message.',
        linkError: 'An error occurred when attempting to generate a link for this channel. Please try again.',
        locationNotSupported: 'Your browser does not support location services or it’s been disabled. Please type your location instead.',
        locationSecurityRestriction: 'This website cannot access your location. Please type your location instead.',
        locationSendingFailed: 'Could not send location',
        locationServicesDenied: 'This website cannot access your location. Allow access in your settings or type your location instead.',
        messageError: 'An error occured while sending your message. Please try again.',
        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',
        messageSending: 'Sending...',
        messageDelivered: 'Delivered',
        messengerChannelDescription: 'Connect your Facebook Messenger account to be notified when you get a reply and continue the conversation on Facebook Messenger.',
        notificationSettingsChannelsDescription: 'You can also talk to us from your favorite app or service.',
        notificationSettingsChannelsTitle: 'Other Channels',
        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: '[email protected]',
        prechatCaptureConfirmationText: 'Thanks for that! What can we help you with?',
        prechatCaptureMailgunLinkingConfirmation: 'You\'ll be notified here and by email at {email} once we reply.',
        sendButtonText: 'Send',
        settingsHeaderText: 'Settings',
        shareLocation: 'Share location',
        smsBadRequestError: 'We were unable to communicate with this number. Try again or use a different one.',
        smsCancel: 'Cancel',
        smsChangeNumber: 'Change my number',
        smsChannelDescription: 'Connect your SMS number to be notified when you get a reply and continue the conversation over SMS.',
        smsChannelPendingDescription: 'Check your messages at {number} to confirm your phone number.',
        smsContinue: 'Continue',
        smsInvalidNumberError: 'Your phone number isn\'t valid. Please try again.',
        smsLinkCancelled: 'Link to {appUserNumber} was cancelled.',
        smsLinkPending: 'Pending',
        smsPingChannelError: 'There was an error sending a message to your number.',
        smsSendText: 'Send me a text',
        smsStartTexting: 'Start Texting',
        smsTooManyRequestsError: 'A connection for that number was requested recently. Please try again in {minutes} minutes.',
        smsTooManyRequestsOneMinuteError: 'A connection for that number was requested recently. Please try again in 1 minute.',
        smsUnhandledError: 'Something went wrong. Please try again.',
        tapToRetry: 'Message not delivered. Tap to retry.',
        tapToRetryForm: 'Form not submitted. Tap anywhere on the form to retry.',
        telegramChannelDescription: 'Connect your Telegram account to be notified when you get a reply and continue the conversation on Telegram',
        uploadDocument: 'Upload document',
        uploadInvalidError: 'Invalid file',
        uploadPhoto: 'Upload photo',
        uploadVirusError: 'A virus was detected in your file and it has been rejected',
        unsupportedMessageType: 'Unsupported message type.',
        unsupportedActionType: 'Unsupported action type.',
        viberChannelDescription: 'Connect your Viber account to be notified when you get a reply and continue the conversation on Viber. To get started, scan the QR code using the Viber app.',
        viberChannelDescriptionMobile: 'Connect your Viber account to be notified when you get a reply and continue the conversation on Viber. To get started, install the Viber app and tap Connect.',
        viberQRCodeError: 'An error occurred while fetching your Viber QR code. Please try again.',
        wechatChannelDescription: 'Connect your WeChat account to be notified when you get a reply and continue the conversation on WeChat. To get started, scan this QR code using the WeChat app.',
        wechatChannelDescriptionMobile: 'Connect your WeChat account to be notified when you get a reply and continue the conversation on WeChat. To get started, save this QR code image and upload it in the <a href=\'weixin://dl/scan\'>QR code scanner</a>.',
        wechatQRCodeError: 'An error occurred while fetching your WeChat QR code. Please try again.',
        whatsappChannelDescriptionDesktop: 'Sync your account to WhatsApp by scanning the QR code or clicking the link below.\nThen, send the pre-populated message to validate the sync request. (Your code: {{code}}).',
        whatsappChannelDescriptionMobile: 'Sync your account to WhatsApp by clicking the link below.\nThen, send the pre-populated message to validate the sync request. (Your code: {{code}}).',
        whatsappLinkingError: 'An error occurred while fetching your WhatsApp linking information. Please try again.'
    }
}).then(function() {
    // Your code after init is complete
});

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

// pass it around...

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

AvMessagingSdk.open();

AvMessagingSdk.close();

AvMessagingSdk.isOpened();

AvMessagingSdk.login('some-id', 'some-jwt');

AvMessagingSdk.logout();

AvMessagingSdk.destroy();

AvMessagingSdk.sendMessage({
    type: 'text',
    text: 'hello'
});

// OR

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

AvMessagingSdk.startTyping();

AvMessagingSdk.stopTyping();

const actionId = '5a747faa065bbe4e7804f2a4';
AvMessagingSdk.triggerPostback(actionId, '62565b5c2b4039adff80b7fd');

const conversation = AvMessagingSdk.getConversation();

console.log(conversation.messages);
// [
//     {
//         "text": "Do you want to continue?",
//         "actions": [
//             {
//                 "payload": "text:continue",
//                 "text": "Continue conversation",
//                 "_id": "5a7c65211aaa9b61f69c95e3",
//                 "type": "postback"
//             }
//         ],
//         "type": "text",
//         "role": "appMaker",
//         "_id": "5a7c65211aaa9b61f69c95e2",
//         // ...
//     }
// ]

// Indicate that the user has clicked on the "Continue conversation" postback action.
AvMessagingSdk.triggerPostback(conversation.messages[0].actions[0]._id);

AvMessagingSdk.updateUser({
    givenName: 'Updated',
    surname: 'Name',
    email: '[email protected]',
    properties: {
      'justGotUpdated': true
    }
});

var user = AvMessagingSdk.getUser()

var conversation = AvMessagingSdk.getConversation();

// Data object
conversation = {
    _id: '<conversation-id>',
    unreadCount: 0,
    lastUpdatedAt: 1581010017.596,
    type: "personal",
    participants: [
        {
            _id: '<participant-id>',
            appUserId: '<appUser-id>',
            unreadCount: 0,
            lastRead: 1581010017.596
        }
    ],
    metadata: {},
    messages: [
        {
            role: 'appUser',
            authorId: '6ac41c8b32e704f3cdb9052d',
            name: 'Some user',
            _id: '5e6022c9cb55158bfd53f845',
            type: "text",
            received: 1583358665.139,
            text: 'Hello',
            source: {
                type: 'web',
                id: 'c38ae913af7c4ef3800b339ee529c579',
                integrationId: '5d8274d4aa780a5483f0ee56'
            }
        }
    ]
}

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

AvMessagingSdk.startConversation();

AvMessagingSdk.markAllAsRead();

AvMessagingSdk.showNotificationChannelPrompt();

AvMessagingSdk.setPredefinedMessage(message);

AvMessagingSdk.setDelegate(delegate);

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

        return message;
    },
    beforeSend(message, data) {
        return message;
    },
    beforePostbackSend(postback, data) {
        return postback;
    },
    onInvalidAuth() {
        return new Promise((resolve) =>
            resolve('<my-new-auth-token>')
        )
    }
}

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

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

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

            return message;
        }
    }
});

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

            return message;
        }
    }
});

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

           return postback;
       }
   }
});

AvMessagingSdk.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!
AvMessagingSdk.on('ready', function(){
    console.log('the init has completed!');
});

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

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

AvMessagingSdk.destroy();

// This event triggers when a participant is added to a conversation
AvMessagingSdk.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
AvMessagingSdk.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
AvMessagingSdk.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
AvMessagingSdk.on('conversation:read', function(payload, data) {
    if (data.role === 'appMaker') {
        console.log(`Conversation ${data.conversation._id} was read by appMaker`);
    } else if (data.role === 'appUser') {
        console.log(`Conversation ${data.conversation._id} was read by appUserId: ${payload.appUserId}`);
    }
});

// Data object, if the conversation was read by the appMaker, the appUser property will not exist
payload = {
    appUserId: '<appUser-id>',
    lastRead: 1581010017.596,
    role: 'appUser'
}

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

// This event triggers when a conversation is removed
AvMessagingSdk.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
AvMessagingSdk.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
AvMessagingSdk.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
AvMessagingSdk.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
AvMessagingSdk.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
AvMessagingSdk.on('widget:opened', function() {
    console.log('Widget is opened!');
});

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

// This event triggers when an active connection has been established for the first time,
// or when the connection has been re-established after a `disconnect` event.
AvMessagingSdk.on('connected', function(e) {
    console.log('Connected');
});

// This event triggers when an active connection is lost
// While disconnected, the client will not be able to recieve messages
AvMessagingSdk.on('disconnected', function(e) {
    console.log('Disonnected');
});

// This event triggers when appMaker starts typing. The associated conversation is passed in the argument.
AvMessagingSdk.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 appMaker stops typing. The associated conversation is passed in the argument.
AvMessagingSdk.on('typing:stop', function(data) {
    console.log(`${data.name} stopped typing!`, data.conversation._id);
});

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

AvMessagingSdk.init({
    integrationId: '<integration-id>',
    embedded: true
});

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

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