Untitled

Introduction

Once your Agent is functional, you might want her to interact with your users in other communications apps such as Slack, Discord or Whatsapp.

You might also want to interact with it in your own properties such as a website. In this case, you have two options : if you want to control the whole experience, please refer to the API documentation. For a very simple integration in a few clicks, you can refer to the iFrames section of this page.

More integrations are coming with email, Telegram, Line. Do not hesitate to reach out to us in our Discord Community if a case needs a specific intergration.

Slack

<aside> šŸ—ļø

Under Construction

</aside>

Discord

Step 1: Create a Discord Application

Create a new Discord application atĀ discord.com/developers, and define its name and description

image.png

Step 2: Create the Discord App in Squadra admin

Create a new Discord App in Deployment > Discord Apps.

Copy the application ID from Discord in the form in the Squadra admin:

image.png

Step 3: Back to Discord Bot configuration

In the Bot section of Discord, configure your bot user, and check "Message Content Intent" under "Privileged Gateway Intents". Then generate a bot token and copy it in the form below.

image.png

In the Installation section, make sure to tick the checkbox ā€œGuild Installā€, and to provide the right scopes (ā€applications.commandsā€, ā€œbotā€) and permissions (ā€Send Messagesā€).

Copy the provided Install Link. You will then need to use this link to add the bot to your Discord server.

image.png

Step 4: Add the bot to your Discord server

Paste the provided link in your browser, and add the bot to your server !

image.png

This will open the Discord app.

Step 5: Restart the Agent in Squadra

Restart the agent in Squadra (Deployment > Discord Apps) after you added the app in your Discord server.

Whatsapp

Step 0: If necessary, make sure the Agent is set as Public

In case your Agent is bound to be interacting with persons who are not immediately identifiable (which it is likely to do if it answers at a Whatsapp number), as opposed to users who are logged in your app or in Squadra, make sure it is set as Public. In this same page, refer to ā€œWebpage embeddings \ Step 1ā€ section below.

Step 1: Create an app on Meta

Go to developer.facebook.com and Create an App.

image.png

Select Other to create a Whatsapp app

image.png

Then select app type ā€œbusinessā€. Finish the setup (choose a name, and a business account if relevant).

Add Whatsapp to your app.

image.png

Copy the App ID on top of your app Whatsapp Setup Page.

image.png

Go to App settings\\ Basics and copy your App Secret.

image.png

Step 2: Create a new Whatsapp App on Squadra

Now go to Deployment > Whatsapp Apps, with your App ID and App Secret carefully noted.

Create a new app, enter whatever name suits your Whatsapp account.

image.png

Enter your App ID and your App Secret previously copied from the Meta admin. Enter a random Verify token (copy it, you will need to paste it in your Meta dashboard).

image.png

Step 3: Back to developers.facebook.com

Back to developers.facebook.com, go to Whatsapp \\ API Setup, and find the Phone number ID. Copy it, then paste it in Squadra Whatsapp App setup.

Back to developers.facebook.com, go to Whatsapp \ Configuration, and paste https://app.squadra.ai/api/v1/whatsapp/webhooks/<app id> in the Callback URL field where app id is the Application ID which you already filled in Squadra, and Verify token is that same Verify token which you previously filled in Squadra. Click Verify and save. The list of Webhook fields will become accessible, subscribe to ā€œMessagesā€.

image.png

Step 4: Dedicated SIM card (almost mandatory)!

In (the very likely) case when your phone number is already tied to a personal Whatsapp account, you will need a dedicated number to link with Whatsapp Business. Otherwise, you will only be able to use test accounts, with which your agent can only interact with a list of pre-defined users.

You have a few options to get a dedicated number: obviously, contract with a Telecom provider to get a new SIM card or eSIM (in France, you can get a 2€/month account with Free). Or use a service such as https://www.onoff.app/.

Step 5: Generate token

In https://business.facebook.com/settings/system-users/xxxxxx?business_id=xxxxxxxxxxxx, create a new System User. Grant it all necessary permissions to your app, and generate a new token.

image.png

You will need to choose the right permissions:

image.png

(note : the corresponding Meta documentation is here.)

Copy the Access token and copy it in Squadra in Deployments \ Whatsapp Apps under the filed Auth token.

That’s it !

Webpage embeddings

Step 1 : Make sure the Agent is set as Public

image.png

Step 2 : Create a service account

Go to Development > Service Account : https://app.ragtime.ai/squadramarketing/admin/dev/service

Create a new Service Account. Make sure the Role is set as ā€œUserā€ if you just want to embed an open chatbot on a website (otherwise you would be granting access to an admin account, with access to Admin rights).

image.png

Step 3 : Create the embedding

Go to Deployment > Webpage Embeddings https://app.ragtime.ai/squadramarketing/admin/deploy/embeds

image.png

Create a new embedding. Give it the name you want (for example, ā€œLanding Pageā€).

Select the right User (for example, Website if that’s the name of the service account for your website), and input the URL of your application.

Step 4 Case 1: Your App is a Website: Create an iFrame

Use the URL displayed in the same page in the admin Deployment > Webpage Embeddings. This URL should start with ā€œhttps://app.squadra.ai/embed/[your_agent]ā€œ

Here is a sample code for integrate the agent as an iFrame using the specific URL provided to you by Squadra:

<iframe 
    src="<https://app.squadra.ai/embed/aaaaaaaa-6b87-4ead-8d5e-xxxxxxxxxxx>" 
    width="800" 
    height="600" 
    frameborder="0" 
    allowfullscreen>
</iframe>

Step 4 Case 2: Your App is a Mobile App: Create a Webview

Use that same URL, and call it:

webView.loadUrl("[<https://app.squadra.ai/embed/>](<https://app.squadra.ai/embed/>)<uuid>");

☰ On this page…