Knowledge Base

Table of Contents

What is the Messenger SDK?

With Sparkcentral, you are able to implement a customizable, fully-featured messenger on your website or inside your mobile app. This allows any customer that visits your website or uses your app to get into contact with your support directly. This removes the need to navigate your user to Facebook, WhatsApp or any other messaging platform.

Create your Channel

STEP 1. Navigate to SettingsChannels & Business Hours ,Channels

STEP 2. Click on Add Channel, and select Sparkcentral Messenger. 

  • A window will pop-up. If it doesn’t, make sure your browser allows pop-ups from Sparkcentral.

Step 3: Name your messenger channel. Keep in mind that you will want this name to be unique and specific to the location of your messenger (i.e. specific web page, mobile app). Click Next.

Step 4: Save the information provided in the success window. This information will only be displayed once, so it’s important to take down all of this information. 

Implementing Messenger on your website

Latest version

The latest version of our Web Messenger SDK can be found here:

Get Started

The following steps are required to get the Web Messenger to pop up on your website.

  1. Towards the end of the <head> section, paste the following code below. (Make sure to copy it all!).
<script>
    !function(s,c,o,i){var a,p,u,d=[],f=[];function e(){var n="2.1.0";try{if(!i)throw new Error(n);var e,t="https://cdn.sparkcentral.com/rtm/web/2.1.0/",r="sparkcentral";if((e="string"==typeof this.response?JSON.parse(this.response):this.response).url){var s=c.getElementsByTagName("script")[0],o=c.createElement("script");o.async=!0;var a=i.match(/([0-9]+)\.?([0-9]+)?\.?([0-9]+)?/),p=a&&a[1];if(a&&a[3])o.src=t+r+"."+i+".min.js";else{if(!(1<=p&&e["v"+p]))throw new Error(n);o.src=e["v"+p]}s.parentNode.insertBefore(o,s)}}catch(e){e.message===n&&console.error(e)}}s[o]={init:function(){a=arguments;var n={then:function(e){return f.push({type:"t",next:e}),n},catch:function(e){return f.push({type:"c",next:e}),n}};return n},on:function(){d.push(arguments)},render:function(){p=arguments},destroy:function(){u=arguments}},s.__onWebMessengerHostReady__=function(e){if(delete s.__onWebMessengerHostReady__,s[o]=e,a)for(var n=e.init.apply(e,a),t=0;t<f.length;t++){var r=f[t];n="t"===r.type?n.then(r.next):n.catch(r.next)}p&&e.render.apply(e,p),u&&e.destroy.apply(e,u);for(t=0;t<d.length;t++)e.on.apply(e,d[t])};var n=new XMLHttpRequest;n.addEventListener("load",e),n.open("GET","https://cdn.sparkcentral.com/rtm/web/2.1.0/loader.json",!0),n.responseType="json",n.send()}(window,document,"Sparkcentral","2");
</script> 

       2. Next, you need to initialize the Web Messenger. To do so, paste the init call code below towards the               end of the <body> section.

           This will initialize a basic Web Messenger without any special customizations. (The web messenger can                 be customized with a lot of options in the next section.)

           Please Note:

  • On the third line, you will need to insert your specific channel Integration ID. This is one of the pieces of text that have been generated on channel creation.
  • The region field must be set accordingly to where your Sparkcentral instance belongs to. Sparkcentral is available in the following regions:
Region Region Identifier
United States Leave unspecified
European Union eu-1
<script>
    var initPromise = Sparkcentral.init({
        integrationId: 'Integration ID here',

        // Leave unspecified for US region (default)
        region: 'eu-1',
        
       //This makes sure the customer is not able to create multiple conversations.
        canUserCreateMoreConversations: false,
        canUserSeeConversationList: false,
        
        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.',
            connectNotificationText: 'Sync your conversation and continue messaging us through your favorite app.',
            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.',
            emailChangeAddress: 'Change my email',
            emailDescription: 'To be notified by email when you get a reply, enter your email address.',
            emailFieldLabel: 'Email',
            emailFieldPlaceholder: 'Your email address',
            emailFormButton: 'Submit',
            emailLinkingErrorMessage: 'Please submit a valid email address.',
            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.',
            lineChannelDescription: 'To talk to us using LINE, scan this QR code using the LINE app and send us a message.',
            linkChannelPageHeader: 'Sync your conversation',
            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.',
            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...',
            messengerChannelDescription: 'Connect your Facebook Messenger account to be notified when you get a reply and continue the conversation on Facebook Messenger.',
            newConversationButtonText: 'New Conversation',
            notificationSettingsChannelsDescription: 'Sync this conversation by connecting to your favorite messaging app to continue the conversation your way.',
            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: 'name@company.com',
            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: '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: 'Send',
            smsInvalidNumberError: 'Please submit a valid phone number.',
            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.',
            syncConversation: 'Sync conversation',
            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: '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.',
            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
    }); 
</script>  
Optional functions
Opens the conversation widget (noop when embedded)
Sparkcentral.open();

Closes the conversation widget (noop when embedded)
Sparkcentral.close();

Tells if the widget is currently opened or closed.
Sparkcentral.isOpened();

Logs a user in the Web Messenger, retrieving the conversations the user already had on other browser sessions and/or devices. Note that you don't need to call this after `init` if you already passed the external id and jwt as arguments in the call to `inti`, in which case it's done internally as part of the initialization sequence. This returns a `Promise` that resolves when the Web Messenger is ready again.
Sparkcentral.login('externa-id', 'some-jwt');

Logs out the current user and reinitialize the widget with an anonymous user. This returns a promise that resolves when the Web Messenger is ready again.
Sparkcentral.logout();


Destroys the Web Messenger and makes it disappear. The Web Messenger has to be reinitialized with `init` to be working again because it also clears up the integration id from the Web Messenger. It will also unbind all listeners you might have with `Sparkcentral.on`.
Sparkcentral.destroy();

Sends a message to the targeted conversation on the user's behalf.
Sparkcentral.sendMessage(
    {
        type: 'text',
        text: 'hello'
    },
    '<conversation-id>'
);

// OR

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

Customizing your Web Messenger and Options

Quite a few options are available to customize your Web Messenger to your heart’s content. An example of a fully customized Web Messenger is posted below. Every single different option is documented below the snippet. 

Sparkcentral.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,
        fields: [
            {
                type: 'email',
                name: 'email',
                label: 'Email',
                placeholder: 'your@email.com'
            },
            {
                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: {
        actionPostbackError: 'An error occurred while processing your action. Please try again.',
        clickToRetry: 'Message not delivered. Click to retry.',
        connectNotificationText: 'Be notified inside your other apps when you get a reply.',
        connectNotificationSingleText: 'Be notified when you get a reply.',
        connectNotificationSingleButtonText: 'Turn on <name> notifications',
        connectNotificationOthersText: 'others',
        conversationTimestampHeaderFormat: 'MMMM D YYYY, h:mm A',
        fetchHistory: 'Load more',
        fetchingHistory: 'Retrieving history...',
        fileTooLargeError: 'Max file size limit exceeded ({size})',
        fileTypeError: 'Unsupported file type.',
        headerText: 'How can we help?',
        imageClickToReload: 'Click to reload image.',
        imageClickToView: 'Click to view {size} image.',
        imagePreviewNotAvailable: 'Preview not available.',
        inputPlaceholder: 'Type a message...',
        introductionText: 'We\'re here to talk, so ask us anything!',
        invalidFileError: 'Only images are supported. Choose a file with a supported extension (jpg, jpeg, png, gif, or bmp).',
        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',
        prechatCaptureGreetingText: 'Hi there 👋\nTo start off, we\'d like to know a little bit more about you:',
        prechatCaptureConfirmationText: 'Thanks for that! What can we help you with?',
        sendButtonText: 'Send',
        settingsHeaderText: 'Settings',
        shareLocation: 'Share location',
        tapToRetry: 'Message not delivered. Tap to retry.',
        unsupportedMessageType: 'Unsupported message type.',
        unsupportedActionType: 'Unsupported action type.',
        uploadDocument: 'Upload document',
        uploadInvalidError: 'Invalid file',
        uploadPhoto: 'Upload photo',
    }
}).then(function() {
    // Your code after init is complete
});

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

// pass it around...

initPromise.then(function() {
    //do something else
}); 
Options
This is the place in which general settings can be changed.
Option Optional? Default value Description
integrationID No Your app/integration id
region Yes The target region in which the app is located.
jwt Yes Token to authenticate your communication with the server
userId Yes User’s id
authCode Yes An auth code for linking to an existing conversation
locale Yes en-US Locale used for date formatting using the `-` format. Language codes can be found here and country codes here.

Note 1: The country part is optional, and if a country is either not recognized or supported, it will fallback to using the generic language. If the language isn’t supported, it will fallback to `en-US`.

Note 2: this is only used for date formatting and doesn’t provide built-in translations for Web Messenger.
soundNotificationEnabled Yes TRUE Enables the sound notification for new messages
imageUploadEnabled Yes TRUE Enables the image upload feature.
embedded Yes FALSE Tells the widget it will be embedded. (see Embedded section below)
displayStyle Yes button Choose how the messenger will appear on your website. Must be either button or tab.
buttonIconUrl Yes When the displayStyle is button, 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.
buttonWidth Yes 58px When the displayStyle is button, you have the option of specifying the button width.
buttonHeight Yes 58px When the displayStyle is button, you have the option of specifying the button height.
businessName Yes A custom business name.
businessIconUrl Yes A custom business icon url. The image must be at least 200 x 200 pixels and must be in either JPG, PNG, or GIF format.
backgroundImageUrl Yes A background image url for the conversation. Image will be tiled to fit the window.
customColors Yes See below. Colors used in the Web Messenger UI.
customText Yes See the example below Strings used in the Web Messenger UI. You can use these to either customize the text or translate it. Note: Some strings include variables (surrounded by {}) which must remain in your customized text.
menuItems Yes See below.
prechatCapture Yes See below.

Customizing the colors

You can give your Web Messenger a custom look by editing these settings.

OptionOptional?Default valueDescription
brandColorYes65758eThis color will be used in the messenger header and the button or tab in idle state. Must be a 3 or 6-character hexadecimal color.
conversationColorYes0099ffThis color will be used for customer messages, quick replies and actions in the footer. Must be a 3 or 6-character hexadecimal color.
actionColorYes0099ffThis color will be used for call-to-actions inside your messages. Must be a 3 or 6-character hexadecimal color.

Text options

 

There are a lot of different text options available in our Web Messenger. A few examples are shown below.

OptionDefault value if not used
actionPostbackErrorAn error occurred while processing your action. Please try again.
clickToRetryMessage not delivered. Click to retry.
connectNotificationTextBe notified inside your other apps when you get a reply.
connectNotificationSingleTextBe notified when you get a reply.
connectNotificationSingleButtonTextTurn on <name> notifications
connectNotificationOthersTextothers
conversationTimestampHeaderFormatMMMM D YYYY, h:mm A
fetchHistoryLoad more
fetchingHistoryRetrieving history…
headerTextHow can we help?
inputPlaceholderType a message…
introductionTextWe’re here to talk, so ask us anything!
invalidFileErrorOnly images are supported. Choose a file with a supported extension (jpg, jpeg, png, gif, or bmp).
locationNotSupportedYour browser does not support location services or it’s been disabled. Please type your location instead.
locationSecurityRestrictionThis website cannot access your location. Please type your location instead.
locationSendingFailedCould not send location
locationServicesDeniedThis website cannot access your location. Allow access in your settings or type your location instead.
messageErrorAn 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
messageRelativeTimeJustNowJust now
messageRelativeTimeMinute{value}m ago
messageTimestampFormath:mm A
messageSendingSending…
messageDeliveredDelivered
sendButtonTextSend
settingsHeaderTextSettings
tapToRetryMessage not delivered. Tap to retry.
unsupportedMessageTypeUnsupported message type.
unsupportedActionTypeUnsupported action type.
uploadDocumentUpload document.
uploadInvalidErrorInvalid file.
uploadPhotoUpload photo.

Menu items

Menu items can be enabled or disabled.

OptionOptional?Default valueDescription
imageUploadYesTRUEEnables the image upload menu item
fileUploadYesTRUEEnables the file upload menu item
shareLocationYesTRUEEnables the share location menu item

Prechat capture

This is an option you can set to have the Web Messenger automatically post a message to the user. In this, you can implement all kinds of messages. The code snippet below is the same as the one used in the example above.

prechatCapture: {
        enabled: true,
        fields: [
            {
                type: 'email',
                name: 'email',
                label: 'Email',
                placeholder: 'your@email.com'
            },
            {
                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'
                    }
                ]
            }
        ]
    } 

FieldInformation
Emailname: ‘Name of the field’,
label: ‘Label name’,
placeholder: ‘Placeholder text here'”
Textname: ‘Name of the field’,
label: ‘Label name’,
placeholder: ‘Placeholder text here'”
SelectThis is the format in which multiple options are added:

options: [
{
name: ‘Name of the first option’,
label: ‘Label of the first option’
},
{
name: ‘Name of the second option’,
label: ‘Label of the second option’
},
{
name: ‘Name of the third option’,
label: ‘Label of the third option’
}
]

Embedded mode

We also have the ability to set up the Web Messenger in an embedded mode. This well let you choose where you want the widget to be visible.

The example below will showcase what you need to set it up.

Take note that for embedded mode to work, you will need to set the parameter of embedded to true, and call the Sparkcentral.render() function manually.

Sparkcentral.init({
    integrationId: 'INTEGRATION_ID_HERE',
    embedded: true,
    region: 'eu-1'
}).then(() => {
    // Your code after init is complete
}

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

The above sample will embed the Sparkcentral messenger within a DOM element with the id “chat-container”. If you open the web page, you will notice that it is no longer showing a button on the bottom right, but it is visible in the container element.

Using Contact Attributes to save specific Messenger data

Our Sparkcentral Messenger widget enables you to also store information about the webpage and user itself using our Contact Attributes feature. To enable this, do the following.

  1. Go to settings.
  2. Navigate into Agent Workspace -> Contact Attributes.
  3. A list will show up, in which there are a few premade Contact Attributes.
  4. To the right of every row, there is a checkbox that allows you to enable or disable a certain Contact Attribute.
  5. To make use of the Contact Attribute, click on the checkbox. 
  6. Whenever a client now contacts you via the Sparkcentral Messenger Plugin, that specific data will now be stored inside of a Contact Attribute.
Overview of available Contact Attributes for the Web Messenger Plugin
  • Browser Language
  • First Name
  • Last Name
  • Page Domain
  • Page Title
  • Page URL
  • User Id

Using shortcodes to create a rich messaging experience

Why would you want this?

Shortcodes are an incredibly useful way to create a beautiful messaging interface. Below, you can find a few examples of them.

Overview of every shortcode you can use
ElementSyntaxExample
Link button%[]()%[Button label](http://anyurl.com)
Reply button%[](reply:)%[Button label](reply:PAYLOAD)
Location request button%[](location)%[Button label](location)
Image![]()![](http://url-of.the/image.jpg)

Link button

By using multiple Link button shortcodes, you can send the user multiple links in one message. An example:

%[Link to Facebook](https://facebook.com)
%[Link to Twitter](https://twitter.com)
%[Link to LinkedIn](https://linkedin.com)

Reply button

By using multiple Reply Button shortcodes under eachother in one message, you can allow the user to have a choice. For example:

%[Sales](reply:Sales)
%[Support](reply:Support)
%[Engineering](reply:Engineering)

Location sharing button

This code allows you to ‘invite’ the user to share their location with you.

Images

You can send images and gifs using this shortcode.

Implementing Messenger in your mobile app

Introduction

A great way to integrate Sparkcentral into your processes is by incorporating our In-App Messenger. This is an SDK we created that our clients can implement on their apps. This way, support is just a few clicks away.

Available platforms
  • iOS
  • Android
Get Started

iOS

To use our SDK with your iOS application, we will need to add it to our Xcode project.

Installing the SDK dependancy

The first thing to do is installe CocoaPods. CocoaPods is a dependancy manager for Swift and Objective C Cocoa projects.

To install it, run the following command in your terminal.

gem install cocoapods 

We will need to tell Xcode we will be using this pod/dependancy. To do so, create a file called “podfile” in the source folder of your project. In it, write down the following and save it.

project 'Location of your .xcproj file'
target 'YourApp' do
    pod 'Sparkcentral'
end 

Now we should run a command to tell Xcode to install the pod so we can use it. In your terminal, navigate into the source folder of your project. Type the following command in the terminal.

pod install 

Navigate to your source folder and open Info.plist file. In it, add the following keys and values and save it.

<key>NSPhotoLibraryUsageDescription</key>
<string>${PRODUCT_NAME} will read your photo library to gather additional information</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>${PRODUCT_NAME} will write to your photo library to gather additional information</string>
<key>NSCameraUsageDescription</key>
<string>${PRODUCT_NAME} will use your camera to gather additional information</string> 
Using the framework in your project.
Objective C

Import the framework in your source code.

#import "Sparkcentral/Sparkentral.h" 

The first function to run is the following one. Your app id should be change accordingly.

[Sparkcentral initWithSettings:[SKCSettings settingsWithAppId:@"YOUR_APP_ID"] completionHandler:^(NSError * _Nullable error, NSDictionary * _Nullable userInfo) {
    // Your code after init is complete
}]; 
Swift
Sparkcentral.initWith(SKCSettings(appId: "YOUR_APP_ID")) { (error: Error?, userInfo: [AnyHashable : Any]?) in
    // Your code after init is complete
} 
Class reference

The entire class reference can be found here: https://help.sparkcentral.com/class-references/ios/.

Android

Linking the SDK dependancy

Include the following code in your Gradle file.

repositories {
    maven {
        url "https://sparkc.bintray.com/rtm"
    }
}

dependencies {
    compile 'com.sparkcentral:core:latest.release'
    compile 'com.sparkcentral:ui:latest.release'
} 
Using the SDK

Initialize from your Application class

Add the following lines of code to your onCreate method on your Application class:

Sparkcentral.init(this, new Settings("YOUR_APP_ID"), new SparkcentralCallback() {
    @Override
    public void run(Response response) {
        // Your code after init is complete
    }
}); 

Make sure to replace YOUR_APP_ID with the app ID you generate when adding a new Web Messenger Channel.

If you don’t have an Application class, you must create one to make sure Sparkcentral is always initialized properly.

Class reference

The entire class reference can be found here: https://help.sparkcentral.com/class-references/android/.

Was this article helpful?

You already voted!

We're always happy to help you ❤️!

Did you know you could help us too?

We love feedback from our users. It’s incredibly important for our business. That’s why a positive recommendation from your company could really make a difference!