How to integrate Wishloop with Clever Messenger

Messenger bots are on the rise and Clever Messenger is among the first to offer a robust API available to 3rd party apps like Wishloop.

Wishloop offers 2 ways to connect your Clever Messenger campaigns:

• Send to Messenger embeddable button
• Messenger chat box

Both integrations require the same initial setup:

INITIAL SETUP

1. Create your Clever Messenger Account if you haven't already done so. 

On the main dashboard you'll then need to connect to your Facebook™ account. 

Just click the blue + CREATE BOT button to get started:

Clever Messenger will ask for your permission to connect to Facebook™ and will then detect any available Facebook™ Pages linked to your Facebook™ account.

Simply select the Facebook™ page you'd like to create your messenger bot for.

Please note: Messenger bots will always be linked to a specific Facebook™ page and will use your page profile image as their avatar.

2. Once your page is integrated, the Clever Messenger dashboard becomes available:

A full knowledge base covering all of Clever Messenger's clever features can be found here 

Send to Messenger embeddable button

3. To continue, we'll choose Capture from the left menu and then Send to Messenger from the submenu:

You'll then click the blue CREATE NEW button in the top right corner to take you into the button builder.

4. Follow the wizard steps to create your embeddable button code.  You'll need to choose Embeddable as the widget type:

5. Proceed through the sub-navigation.  (In most cases most of the settings can be left as their default values).

You will, of course, need to select a message or "flow" to connect your button with.  Fortunately a default flow option is provided.  You can choose that for now, but don't forget to come back and edit this once you've built out the messenger flow you actually want the button to link to.

Once you're ready, hit SAVE in the top right of the page to save the widget and reveal the embed code in the Install tab.  However you won't need this as we'll be using the API.

Lets do that next...

6. Go to this page in your Clever Messenger account and copy the API key there.

7. Login to your Wishloop account, go to settings>integration, then click on + NEW INTEGRATION.  Choose Clever Messenger: 

8. Give your integration a name and paste the API key into the field provided.

9. Click the Sync Pages button and Wishloop will pull any of your available bots from your Clever Messenger account into Wishloop.

PLEASE NOTE: Every time you create a new bot (i.e. connect a new Facebook page) or create a new embeddable widget in your Clever Messenger account, you'll need to re-sync the integration from this page.

10. Your Wishloop account is now connected to Clever Messenger so it's time to create a campaign in Wishloop.

Embeddable Send to Messenger buttons are available for any Amplify, Engage and Capture template.

11. Open any template and choose Social from the left hand menu, then drag and drop the Clever Messenger widget onto your campaign.

This will add a placeholder image to your campaign:

 

12. Whilst the messenger button widget is selected choose settings from the right panel and choose the button you want to connect with.

The dropdown will be populated with any of the button widgets created in your Clever Messenger account.  For ease of integration, especially for those with lots of Clever Messenger buttons, the options presented in the dropdown will be ordered by the Facebook pages they are associated with.

If you don't see your button here, then:

A. Make sure you have saved it in your Clever Messenger account

B. Make sure you have resynced the integration from Wishloop's side via Settings>Integrations.

13. Once a widget is selected, the widget preview will update to show the live button from your Clever Messenger account. 

You should see your personal Facebook profile image below the button and the button text will inherit the settings from Clever Messenger. 

Within Wishloop you can choose to animate/delay the entry of the button, however all additional button settings for the connected messenger bot flow, button styling, etc... will be controlled from within your Clever Messenger account

Messenger chat box

I mentioned at the start that WIshloop allows 2 ways to connect with Clever Messenger.

The second way is via adding a Messenger chat box to any Capture page you create.

Please note: this option only works with Capture and is not available for Engage/Amplify.  

Setting this up is simple.

1. Firstly you'll still need to connect Wishloop and Clever Messenger via the API.  So follow steps 6-9 if you haven't already.

Connecting the 2 accounts in this way will help ensure that the necessary whitelisting of any custom domains added to your Wishloop account will automatically be applied.  (However see note at step 6 below)

PLEASE NOTE: domain whitelisting is a necessary part of any Messenger integration but our integration handles this in the background. 

2. In your Clever Messenger Account, go to Capture, then choose Customer Chat.

3. Give your chat box a name and edit the settings as desired.

Click SAVE to reveal the chat box embed code, and copy the code.

4. Create or edit an existing Capture campaign in your Wishloop account.

Click on the background for the campaign and click on settings in the right panel.

Here you should paste the Clever Messenger chat box embed code:

5. Save the campaign, close the builder and view your page.  If the chat box is shown then all is good.  If it's not shown then there is one final step.

6. The domain whitelisting is subject to some API limit rates so may not always be automatically applied.  If your chat box is not shown simply go to your Clever Messenger account and enter the domain (or subdomain) your Capture page will be shown on into the domain whitelisting section:

7. And we're done.  Reload your Capture page, and the Messenger Chat box should now be available:

BOOM! All finished.  We hope you enjoy using Clever Messenger with Wishloop 😀