# Salesforce Integration

![](https://content.gitbook.com/content/vGYwUmVjfELEiJzfmWLC/blobs/EET7RhHxdnxqnXVUcuss/ux%20indonesia%208mikJ83LmSQ%20unsplash.jpg)

We all know how valuable a smart, well-designed customer support chatbot can be.

Current usage statistics show that at least 70% of level-one customer questions can be handled without real human interaction.

More than 75% of adults today would rather exchange messages with a brand than wait indefinitely in a phone queue.

If your support workflow is ready to make the jump, your current setup may be holding you back. A chatbot can become a new source of information, but also another application for your support team to monitor and train.

![](https://content.gitbook.com/content/vGYwUmVjfELEiJzfmWLC/blobs/lkxdHVgbVfUl6DS4t9hP/image%2018%201024x323.png)

In this article, we’ll look at how to integrate Salesforce, a widely used CRM platform that also supports customer service and marketing automation.

We will integrate Xenioo directly into the Salesforce interface so it becomes part of the workflow, rather than just another external tool.

## Getting Started

The first things we need for this integration are, of course, a Xenioo account and a Salesforce account.

You can sign up for a Xenioo account right away to build and preview the bot we’re creating in this post. When you’re happy with your build, you can choose the upgrade path you prefer to make your chatbot public.

Since we’re going to integrate deeply with the Salesforce API, make sure your Salesforce license allows external API access. If not, you can still sign up for a free developer account and complete the integration before deciding whether to upgrade.

## Salesforce Connected App

Once your Salesforce account is ready, retrieve the client ID and client secret that you will use for the API integration.

To do this, open the Salesforce console and click the **Setup** menu item in the top-right area. This opens the general setup page.

![](https://content.gitbook.com/content/vGYwUmVjfELEiJzfmWLC/blobs/2mGMju2FDRCCG1Zjc29G/image.png)

From the **Quick Find** menu on the right, type *app* and then click **App Manager** in the left menu.

This displays the **Lightning Experience App Manager** view. From there, click **New Connected App**.

![](https://content.gitbook.com/content/vGYwUmVjfELEiJzfmWLC/blobs/1ytzp57evO1itoe9EoIf/image%201.png)

You can name your app anything you like, as long as the name is available. Set the contact email you prefer and scroll down to the API section.

Fill the **Callback URL** field with any URL you prefer, since we won’t use it here. Set the scopes of your connected app to at least **Manage User data via APIs (API)**. Since this is a test and we’ll be trying multiple things, we also suggest adding **Full Access (full)**.

![](https://content.gitbook.com/content/vGYwUmVjfELEiJzfmWLC/blobs/kilTIHj7izkt83rwQnKA/image%202.png)

The general setup is now complete, and you can save the connected app configuration. You should return to the list of connected apps. From there, click **View** for your app to open its details.

In the API section, you should find the **Consumer Key** and **Consumer Secret** fields. These correspond to the client ID and client secret required for every API call. Copy both values somewhere safe, then continue to Xenioo.

## Building our Support Bot

Instead of starting from scratch, we’ll use a pre-made support bot template and adapt it for this integration.

For this example, restore the free **Advanced NLP Customer Care** template into your account. You can find it in the **Templates** section inside Xenioo.

All templates are free to preview and use. Just click **Use This** to create a copy of the bot in your account.

![](https://content.gitbook.com/content/vGYwUmVjfELEiJzfmWLC/blobs/hlTdenXrx7GEy5qClhit/image%203.png)

This support bot is already trained to reply to simple questions about printer connectivity and general driver setup for a sample company, so it is the perfect starting point for our integration.

If you want to explore the flow and logic used in this chatbot in more detail, head to [NLP](https://docs.xenioo.com/ai/nlp) for the AI setup or [Teams](https://docs.xenioo.com/basic-concepts/chatbot-details/chatbot-teams) for teams and escalation.

For this example, we’re going to slightly change the fallback flow so the bot immediately asks whether the user prefers human assistance. This lets us move straight to the integration.

Let’s suppose our bot has a conversation like this:

![](https://content.gitbook.com/content/vGYwUmVjfELEiJzfmWLC/blobs/UrsQKRFOehEmTg95OluL/image%204.png)

Now, if the customer asks for a human operator, the first step is to hand over the conversation so the Xenioo bot engine knows not to interfere.

After that, we can create a case in Salesforce so that our support personnel can be engaged.

The first step is easily handled with Xenioo’s [Set Chat Operator State Action](https://docs.xenioo.com/actions-and-operations/flow/xenioo.bots.actions.base.requestoperatoraction). When this action runs anywhere in the flow, it hands over the conversation to an operator.

Just note that when you add it to your flow [Interactions](https://docs.xenioo.com/basic-concepts/the-chatbot-designer/interactions_concepts), this action may appear differently if you do not have the [Pro Team](https://docs.xenioo.com/basic-concepts/your-account/additional-packages) package enabled.

![](https://content.gitbook.com/content/vGYwUmVjfELEiJzfmWLC/blobs/9H1k6VLlidNrIjaY1Iv6/image%205.png)

## Salesforce API Integration

With the client ID and client secret from the Salesforce Connected App, and with our chatbot ready, we can now move on to the API integration itself.

Xenioo can integrate with any public API by using the [Call API Service Action](https://docs.xenioo.com/actions-and-operations/integration/xenioo.bots.actions.base.callapiserviceaction), which you can find under the **Integrations** section of the actions and operations menu.

This action is extremely flexible and supports almost any kind of external call.

To use Salesforce API we need to first create an API token. We will do it with our very first API action:

![](https://content.gitbook.com/content/vGYwUmVjfELEiJzfmWLC/blobs/TRdorLBkJsg8jgUQ6PkU/image%206.png)

There are a couple of important details in this call. First, the Salesforce URL is specific to your account, so make sure you use your own base URL.

The second part is the payload. The token creation API must be called with a form POST, and in Xenioo we do this by selecting **From Encoded** mode. Salesforce also requires a user account in addition to the client ID and secret. You can use your own administrative user or create a dedicated user that can generate an API token.

If this call succeeds, Xenioo stores the API response in the configured `salesforce_token` variable. The returned data is a full JSON object similar to this:

```json
{
     "access_token":"...DCadsfaqweSAKDSLklerdaoijwqeoif...",
     "expires":3600
}
```

We don’t need everything here. We only need the `access_token` value. Thanks to Xenioo’s native support for [Dynamic Parsing And Content](https://docs.xenioo.com/actions-and-operations/dynamic-parsing), we can use that value directly without any custom script. Accessing values in a JSON object works just like accessing a simple variable.

Now that we have the token, we can add another API action and call the Salesforce Cases endpoint to create a new support case. This time, the payload contains the full JSON object expected by the Salesforce API.

![](https://content.gitbook.com/content/vGYwUmVjfELEiJzfmWLC/blobs/cXDbwDuQwETVb4TzKoof/image%209.png)

See how the token is used by simply referencing the model value? You can do this anywhere in Xenioo.

If we repeat the previous flow, choose to talk to a human, and then open the **Cases** section in Salesforce, we will find the new case created with the data we just sent through the API.

The case can now be handled by the support team.

![](https://content.gitbook.com/content/vGYwUmVjfELEiJzfmWLC/blobs/KcZinMUXWzA2fxVV7eVF/image%2010%201024x556.png)

If we stopped here, this example would already cover many scenarios, but it would still be a little too limited.

The biggest missing piece is that the support team still has no way to contact the user again and continue the conversation in a real chat.

What we need to do is add a **piece of the Xenioo conversation directly inside Salesforce**. This way, the support team can chat directly with the customer in real time and answer questions without going back and forth through email or one-way messages.

## Exporting the current conversation

To let the support team get in touch with the customer in the same conversation that created the case, we need an incredibly powerful Xenioo feature called [Create Conversation URL Action](https://docs.xenioo.com/actions-and-operations/flow/create-conversation-url-action).

![](https://content.gitbook.com/content/vGYwUmVjfELEiJzfmWLC/blobs/G85buzKbC03RzPu44IZT/image.png)

Using the [Create Conversation URL Action](https://docs.xenioo.com/actions-and-operations/flow/create-conversation-url-action), Xenioo can generate a unique URL for a single conversation and make it accessible for a limited time window.

The URL can be shared as a view-only link or even as a takeover view, where the destination operator can interact with the user.

While the URL displays a web view of the conversation, the **real exchange still happens between Xenioo and the customer’s actual channel.**

This means customers receive messages on the platform they are already using, while operators do not need to engage on that same channel. They do not need a WhatsApp or Facebook account, because they can chat with users directly through Xenioo.

![](https://content.gitbook.com/content/vGYwUmVjfELEiJzfmWLC/blobs/zHNn7UIbxzugiNfv7ngH/image%2017.png)

## Extending the Salesforce Database

Generating the URL is straightforward, but we still need a field where Salesforce can store that information. To do this, we need to customize the **Cases** table.

To edit the case table, go back to the **Setup** section in Salesforce. This time, open the **Object Manager** menu at the top.

From there, scroll down and find the **Case** object that we need to edit.

![](https://content.gitbook.com/content/vGYwUmVjfELEiJzfmWLC/blobs/AK6AZeTAV4XHakhyhygB/image%2012.png)

In the menu that appears, click **Fields & Relationships** and then **New** to add a new field.

The field name is up to you, as long as it doesn’t already exist. In this example, since it will hold the Xenioo conversation URL, we’ll call it **Xenioo Url**. Since Xenioo generates a fairly short URL, a text field with 255 characters is more than enough.

Once the field is created, note the Salesforce API field name in the full field list or in the field details. This is the real field name used by Salesforce, and it is the one we need to reference in our updates.

![](https://content.gitbook.com/content/vGYwUmVjfELEiJzfmWLC/blobs/MLJ5h9A07bIy4OJDAto6/image%2013%201024x546.png)

Now that the case has been modified, all we need to do is make a small change to the Xenioo flow so the URL is also sent to the case. The [Create Conversation URL Action](https://docs.xenioo.com/actions-and-operations/flow/create-conversation-url-action), when executed, creates a variable that holds the unique URL value. We will send that value to Salesforce.

![](https://content.gitbook.com/content/vGYwUmVjfELEiJzfmWLC/blobs/YbJzODOzU9OQEjc5yi4D/image%2014.png)

If we create a new case from Xenioo and go back to the detail page, we will find the shared URL set as expected.

Nice, but this still isn’t the kind of integration we’re looking for. We can’t expect operators to copy and paste the URL manually. We want the conversation to appear directly inside the Salesforce page.

## Creating a Salesforce Component

To bring Xenioo inside Salesforce, we need to create a **Lightning Component** that can be hosted inside a Salesforce page. This may sound difficult, but it is actually quite simple and can be reused anywhere once it is done.

![](https://content.gitbook.com/content/vGYwUmVjfELEiJzfmWLC/blobs/PQqk4NYvnM2REqVEKVBF/image%2015%201024x647.png)

To create the component, open the **Developer Console** in Salesforce. From the menu, select **New** and then **Lightning Component**.

The component is built with a mix of HTML/XML-style markup and Salesforce objects. We don’t need much complexity here, because Xenioo is doing the heavy lifting. All we need is access to the current case data and to the Xenioo URL field we just created.

Copy and paste the component source below, and the component is ready:

```xml
<aura:component implements="force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes" >

    <aura:attribute name="record" type="Object"/>
    <aura:attribute name="simpleRecord" type="Object"/>
    <aura:attribute name="recordError" type="String"/>

    <force:recordData aura:id="recordLoader" fields="xenioo_url__c"
      recordId="{!v.recordId}" targetFields="{!v.simpleRecord}" targetError="{!v.recordError}"
    />

    <iframe style='width: 100%;min-height: 625px;border: none;border-radius:4px;' src='{!v.simpleRecord.xenioo_url__c}'></iframe>
</aura:component>
```

It looks complicated, but it is not. We’re just telling the component that we need the current record and that we’ll read the Xenioo URL value. Then we use that URL as the source for a simple iframe. The iframe displays the Xenioo conversation URL.

Once the component has been updated, save everything and close the Developer Console.

## Changing the Case Page

If we head back to the case page, we can now add the Xenioo Lightning Component. To do so, click **Edit Page** in the top-right menu. This activates the page editor.

You can place the Xenioo Lightning Component wherever you like. In this example, we’re adding it to an extra tab in the details area. If everything we’ve done so far is correct, the Xenioo component will be available on the left side of the page under **Custom Components**.

Drag the Xenioo Lightning Component onto the page wherever you want it. Don’t worry if you see a sad emoji icon in the target area. It just means there is no current URL for the conversation yet.

Once you are happy with the layout, activate it and save everything to return to the real case detail page.

All that’s left to do is click the Xenioo tab we just created to open the live component.

![](https://content.gitbook.com/content/vGYwUmVjfELEiJzfmWLC/blobs/UF9Hs62S8tIJWYQUrqCY/image%2016.png)

And there it is. Our **Xenioo conversation now runs seamlessly inside a Salesforce case page**. From there, we can chat with customers, share files, and handle each support case directly.

## Wrapping Up

You can now integrate any Xenioo chatbot and conversation inside Salesforce Cases. Salesforce APIs let you exchange data with just about anything, so now that you know the path, there are almost no limits to how deep your integration can go.

Any questions about the features explained in this post? Need help with your bot idea? Start with [Professional Service & Support](https://docs.xenioo.com/product-overview/professional-service-and-support).