# Salesforce

## General information

The integration allows you to work with messages from messaging apps and social networks directly in Salesforce Multichannel

## How to set up the integration with Salesforce?

### **Step 1.​ ​Open Setup in SalesForce account**

Navigate to "Apps -> App Manager" and click "New Connected App"

![](https://lh4.googleusercontent.com/qgkwOMulnqZfxnQmjQTpzj68BhumSGSxz9Bkf0UwJxDoTTADjCNvMAEXLzVrCLhZv_-z8gdG7yLz2GyxZ3Kx1gn_H_E2Tfsb_CGpM6qNyWql2JN07tjkQuKVtKzuEQdzjf_sQG7776e7AtTMAw)

### **Step 2. Set up "New Connected App"** 

**​**Fill out the fields as you see in the image below and click "Save". Use the following callback URL names: 

* <https://app.blinger.io/integrations/salesforce/oauth>
* <https://app.blinger.io/integrations/salesforce/operator-oauth-callback>

![](https://lh6.googleusercontent.com/vLYHNGu4EoBh7YQNdcsXuqLqBqu_EU0qoglzRbaOmtUR53JgxhwDkmRAkxTwOxoRdeo0Otj6lWsX20-HST9qlRVxdtUKoyE0yojV0ZvCp5ngsqz8PwFtGFrvkTWMPVXgyYKSvKu9PbcpuP7T3g)

### **Step 3. Open "Manage" in Blinger.io**

Click "Manage" in the dropdown list of Blinger.io application on the "App Manager" page.

![](https://lh6.googleusercontent.com/wrweKxz9Wxxdxt7RevzDJcq0u8NBiTJPPIF96KRlebKvvrGN97LVOATaI7GLH1ZgWUTlz-WGNjbFVin1KsASUm_pFvrSVGKBorewYEepRICSptAqBV6I54TQteeTSwAdcvb1teZDtivKjwMHTg)

### **Step 4. Choose profiles for Blinger.io**

Click "Manage Profiles" and select the profiles that you wish to authorize for working with Blinger.io

![](https://lh4.googleusercontent.com/usT0ewoGUsbJHQqI4yPRA3kn0V_X-sGtXmpMr5uvmcJNS6n943MeDLKsadP8sTY05Rz9LWzHvEk5e3vqrgNG867Vs5nLk1st5Uz74Stnp0cqhIP2QvN8Hp-grv9ScI9-wj21nIcQoGlQO688sA)

### **Step 5.​ ​Set up OAuth policies**

On the same page click "Edit Policies" and set the following settings in OAuth policies section

![](https://lh5.googleusercontent.com/SOi5HSlbaNrv6TjaVKMmGulZ226KGX4gv2_hn2rvungnaFf1sqp4UascwOpHlGcvB8o9_a4N5jc8DMlpnrhg4w3ZvNMVDxKv9aQGw8KOKEVm3ebAc7ZZGspSMV6SoEllRSgOYzLgE74rje5apw)

### **Step 6. Save Consumer Key and Consumer Secret values**

Return to the App Manager page and click "View" for Blinger.io application, then copy **Consumer Key** and **Consumer Secret** to Notepad or another application. These values will be required later.

![](https://lh3.googleusercontent.com/lp07d1SNfXYRAhkkQZTpN9oi--RgQrdaWAqDVXYtPJvCrrwkuna1QyKl3cXCsK8J2ri0-sGiHen0vBUVG4J-AkJrCu3rMQ7jwHoSVcWaRheAQj9kw1yUP5TYsQfMrey7Dr4NsJZGgxvcSRXzNA)

### **Step 7. Choose queue that you will use for Blinger.io messages**

**​**In the left menu open "Users -> Queues", then click on a Queue that you will use for Blinger.io messages.

![](https://lh3.googleusercontent.com/Bt-v4ycC_o2IPmCPSvM5BadYigufvrxArGfty8TYbNnEYc96O4aLbGZ8BxkxXEm62J6J3HHlG5MasHNZ1tMjJvjP4RTIMg4zTSBObmIdEIWlGEQxJor9eRN16utwvEC_StSNB1Qj_9VMn1C5Dg)

### **Step 8. Save** Queue ID

Look to the browser address field in the opened window. Copy last 15 symbols of the web address that start with “00”.

![](https://lh6.googleusercontent.com/uqAE1rjMezeCzDV-NSK0yRAS8DYFQPHz5rcpXyCxe8SdOrlOSrq_2Cxtc3rW__La4HRTmLgfHEFLqxWV80XRK6-KVAYUFQudxfOIavqpAMsmMey_qKLLPSNu2dOuZa8rCqSxUBujXEgaAC228g)

### **Step 9.** Browse to Integrations tab and click on "Add Integration" in front of Salesforce

![](https://lh3.googleusercontent.com/OXWLCnRWlCjEpl043Rn8JtfPa1cjTWxU4EERNIPpaLefaW2B7nH6bWZCcqrKlOcSb8Tz_7pcN6_oQG_K_uM9jPs05ur-caQXQtcQvhC-D3_tk_3B9gC3F7liTSGJiQZck9sobPws)

### **Step 10. Insert the previously saved parameters in the matching fields**

![](https://lh5.googleusercontent.com/4Mn2RiLbNtE1aLG9KbK-QvUAYEgc2UDZcYvFZNa2W9-3SGWXPpW-4D1IGC-OMTgv7KyoTcwSQrv_L6tSrpODIWlenhMMoekDhdt5rAq5_SbAJtx8j2RJGgTiWSuxlztOrCK9RuMX)

Put the following values:&#x20;

| Value             | Description                 |
| ----------------- | --------------------------- |
| **Client Id**     | insert here Consumer Key    |
| **Client Secret** | insert here Consumer Secret |
| **Queue Id**      | insert here Queue Id        |

Click **"Add Salesforce integration"**.

### **Step 11. Save generated Salesforce ID**

Click "Edit" under Salesforce integration in "Integrations" tab and copy Salesforce ID to Notepad or another application.

![](https://lh5.googleusercontent.com/_y9Wn7dYkUY_8F6CckD_3BpmOGEq6-koYbfgD9KzpOQheqo_6_7B6bceiosNWEH1XBvYO2VsAbxHmzOYRGJY1-Ti-p2BYwXwL1D7BlZbwTnnzK_dZdd9E7Xy4pm885_U9dghUy2c)

### **Step 12. ​Open "Visual Pages" in Salesforce account**

Go to Setup and ​navigate to "Custom Code -> Visual Pages" in the left panel.

![](https://lh5.googleusercontent.com/a86x5Xkb8UXCROwj-L0On-ByU6E2sF_z5PZR2tD_datJVyElW7ptKwaRP0gEU5AwpsMyjwZNXho8SLCnOt2_905xZa-Q4CP3y4Exsjq4qD_MEttjgNDjRfqKaPbluNjeucf0C8mz)

### **Step 13.​ ​Fill out the fields in Page information section.**

Click "New button" and ​fill out the fields as you see in the image below

![](https://lh5.googleusercontent.com/ukhMSTtCg7G9BFQf2J9HVgSJKVRHzJFkXAoFXwz2c3vVz3712CZiXfMrO1X77eK8x3qr7GE-YCpRZ1B9lRc5XNz8xHEPqfcF3myzQDgSdNP4oZiQGdK0ihSD3UOb0OgEK-ic2Q7R)

### **Step 14. Paste the specified code in Visualforce Markup window**

![](https://lh5.googleusercontent.com/BJZuUEbFTDCK60Nb6vwT-AC9Ej-v4hjB4U7jYA1z9yh4LF_RRo8bXDtOn3h5rQzQwkf7sf-a7pnKS0PDRaJ5CfiLTpy7izKtya3dYlItm7RozpcMuNHK61D62J3t-1LHdSdt9YCr)

Clear the window Visualforce Markup and paste the following code

{% hint style="warning" %}
Replace **%SERVICE\_ID%** with the generated Salesforce ID in Blinger.io at step 11
{% endhint %}

```javascript
<apex:page standardController="case">
<apex:includeScript value="/support/console/42.0/integration.js"/>
<style>
html, body {
height: 100%;
padding: 0 !important;
}
</style>
<apex:iframe id="theIframe" height="100%"
src="https://app.blinger.io/site/salesforce-iframe?serviceId=​%SERVICE_ID%​&caseId={!$CurrentPage.parameters.id}&serviceUserId={!$User.Id}" scrolling="true"/>
<script>
var formatCaseNumber = function(num) {
while (num.length < 8) {
num = "0" + num;
}r
eturn num;
} f
unction receiveMessage(event) {
if (event.origin == 'https://app.blinger.io') {
if (event.data.operatorAnswer === false) {
sforce.console.setTabTitle(formatCaseNumber('{!Case.CaseNumber}') + ' (1)');
} else if (event.data.operatorAnswer === true || event.data.focused === true) {
sforce.console.setTabTitle(formatCaseNumber('{!Case.CaseNumber}'));
}
}
}
window.addEventListener("message", receiveMessage, false);
</script>
</apex:page>
```

Then click **"Save"**

### **Step 15. Open Salesforce Cases**

![](https://lh6.googleusercontent.com/YX4HOLKArKbzm9iuqHkEOGb4m1Akxmp4eTgybMNs61nIrZjf3JvJN6WvLSsjIi7OpWHgCBdec0P0P2i5fRbPItYeYPrbZMN4eeDqNPkYd-8K3QBHtimm-X0OKOAPb9Sne1k30kG3)

### **Step 16. Open any case and click "Edit" page in Settings**

![](https://lh3.googleusercontent.com/I-XPhIVrWsdxsRidB0amISfgDKU5COpOJ0q6qI2uRhVZVdjogHyQpH_GstvNlgohViw2hhqKurg392CbtuW-3M5FU0nMBNY1muyG6dis9TtPX6sGbzoBxZPf5o8Jktd0OQkJvULU)

### **Step 17. Drag Visualforce component to the editor page**

In the opened editor page select Visualforce in the left menu and drag this component to the page

![](https://lh3.googleusercontent.com/8OGK4HkJ2kKuu9Dk8o5TswMT4G1ZW52beSUWd74nENrV4wR1dS20zRhNc7Hoa0FxbFGI_geimmHElSzzr2Z3GaPhEQLyR1lVRjuzbdY5y3dsNAYG-nsMOHZBIugsVzgovl-wnqul)

### **Step 18.​ Set up Blinger.io iframe window**

**​**Blinger.io iframe window should appear on the page. Make sure that the name «Blinger conversation» is specified in the right menu.&#x20;

Enter the desired height value for the iframe in the Height field (default = 300px) and click "Save".

![](https://lh3.googleusercontent.com/U3LJFzlZg2r2yT8ma5cgBMo6-qMALs7ygMvhsnul6lQYXppCS5PvQ8bUpD0rpHBVYQ45Bw1xkJ5eoeXcPdqZSPum9Dy7fkxObkvFaInB0Y09P7tkGsnVQbcEelkD5sVZB0621X5l)

### **Step 19. ​Click "Login with Salesforce" to start using**

"Blinger.io conversation" window should appear on the Case page.&#x20;

Click "Login with Salesforce" to start working

![](https://lh5.googleusercontent.com/_ox5ApTtCEOBj_9G9kYjOKK1C4BRWGWypYHJ7IkABp3A331y6VaZZ_BuLJcKsrzLH3kQHkyqJnocmOKBQg6e30LyvgDqNaf8glDIUC8jMenK0wBi9x0Y_WBGxt3fx0ZQ0fULUBQx)

{% hint style="success" %}

### The integration is completed!

{% endhint %}