# Live Chat Integration (iOS, Android, Web)

Integrating OneTalk Live Chat will allow you to receive and reply incoming messages from your website or mobile app in your inbox.

{% hint style="warning" %}
**Before you get started:** You will need a website or mobile app (Android or iOS) to integrate with OneTalk Live Chat.
{% endhint %}

{% hint style="info" %}
Integrating OneTalk Live Chat can only be done if your role is **Owner** or **Admin.**
{% endhint %}

### Step 1: Create a **Live Chat** channel

Start by clicking **Integration** on the side menu**.**

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOo57RuynyYDdP9lVTw%2F-MOoA1fmhPQchAQr9X1b%2FhoverIntergration.png?alt=media\&token=38bcb196-648f-4b95-9ac9-406f4951ce9b)

A submenu should appear with different channel options, go ahead and select **Live Chat** (this should be the default page once you click Integration).

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOqU_51fahgTjfC1jQV%2F-MOqUdaA99jt6MkYybjm%2FliveChatEmpty.png?alt=media\&token=53a4b3b9-3794-406b-86c4-1a66228f2c93)

Once selected, go ahead and click on the button <img src="https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOoA6gPf6tV-tWCOtTa%2F-MOoBV9reiOCmKhFUxMH%2Fbttn-addChannel.png?alt=media&#x26;token=4bb19b35-3c7a-4d8f-9e52-5a2b7fbfca69" alt="" data-size="original">&#x20;

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOqU_51fahgTjfC1jQV%2F-MOqUpiUlVjr9Vk2y5cG%2FliveChatEmptyAdd.png?alt=media\&token=03651a30-778e-4d6f-a9d6-487d49706b24)

### Step 2: Select platform

Depending on what platform you choose, the steps may vary. Jump to the section:

* [**Setup Live Chat for iOS**](#setup-live-chat-for-ios)<br>
* [**Setup Live Chat for Android**<br>](#setup-live-chat-for-android)
* [**Setup Live Chat for Web**](#setup-live-chat-for-web)

### **Setup Live Chat for iOS**

Enter your iOS app **Bundle ID**

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOqUs8xyP60p0Qp-23b%2F-MOqZ7TKes-SvIy7k_qi%2FScreenshot%202020-12-18%20at%2022.54.57.png?alt=media\&token=27983558-6597-43a7-9266-e6fc3587baa7)

Once filled, click on <img src="https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOqUs8xyP60p0Qp-23b%2F-MOqZs7-EsHNWrX9AFCT%2Fbttn-CreateChannel.png?alt=media&#x26;token=0147d3d5-fb8e-4892-95a9-10783d15a306" alt="" data-size="original">&#x20;

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOqUs8xyP60p0Qp-23b%2F-MOq_--Qgo962KrDcOTY%2FScreenshot%202020-12-18%20at%2022.57.30.png?alt=media\&token=282d99cc-5936-4f79-9624-839d51c1d5a5)

Once created, you will be redirected to the channel's details, where you can copy its secret key and paste it in your app.

{% hint style="info" %}
Please refer to [**OneTalk Live Chat for iOS**](https://docs.taptalk.io/onetalk-omnichannel-documentation/onetalk-channel-integration/live-chat/onetalk-ios/get-started-ios) once you have created this channel.
{% endhint %}

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOqaJh9inTYN8detj9z%2F-MOqahohs9CDOcpEuRlp%2FliveChat-iOS.png?alt=media\&token=e67bdef0-5674-47aa-8ecb-0eeb533b4d8b)

### **Setup Live Chat for Android**

Enter your Android app **Package Name**

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOqaJh9inTYN8detj9z%2F-MOqbUDw8Pni_7B2vn0Z%2FScreenshot%202020-12-18%20at%2023.09.07.png?alt=media\&token=8d3a157f-31e1-45e7-baa7-2e2800e60ee4)

Once filled, click on <img src="https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOqUs8xyP60p0Qp-23b%2F-MOqZs7-EsHNWrX9AFCT%2Fbttn-CreateChannel.png?alt=media&#x26;token=0147d3d5-fb8e-4892-95a9-10783d15a306" alt="" data-size="original">&#x20;

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOqaJh9inTYN8detj9z%2F-MOqbbrGsJ-kt2vaHNwa%2FScreenshot%202020-12-18%20at%2023.09.07%20copy.png?alt=media\&token=85a712c6-03a4-486e-9d63-ac205ad33bec)

Once created, you will be redirected to the channel's details, where you can copy its secret key and paste it in your app.

{% hint style="info" %}
Please refer to [**OneTalk Live Chat for Android**](https://docs.taptalk.io/onetalk-omnichannel-documentation/onetalk-channel-integration/live-chat/onetalk-android/get-started-android) once you have created this channel
{% endhint %}

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOqaJh9inTYN8detj9z%2F-MOqbkJ2N2F1xXWRa4_k%2FliveChat-Android.png?alt=media\&token=6f0c29df-7b9e-45b9-b7e0-b453666d56fd)

### **Setup Live Chat for Web**

Enter your Web **CORS**. [**Learn more about CORS**](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOqbr6-Z_O2JMwIlXkT%2F-MOqdSPp_hzvgijOclY-%2FScreenshot%202020-12-18%20at%2023.15.34.png?alt=media\&token=b64d5e27-ba99-47e8-a8a2-7e1486ddc6a5)

Once filled, click on <img src="https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOqUs8xyP60p0Qp-23b%2F-MOqZs7-EsHNWrX9AFCT%2Fbttn-CreateChannel.png?alt=media&#x26;token=0147d3d5-fb8e-4892-95a9-10783d15a306" alt="" data-size="original">&#x20;

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOqbr6-Z_O2JMwIlXkT%2F-MOqdYuajSOIrE7TRz-P%2FScreenshot%202020-12-18%20at%2023.15.34%20copy.png?alt=media\&token=7f1b2f7f-4032-444e-b49a-efd1ab5831b1)

Once created, you will be redirected to the channel's details, where you can copy the script generated and paste it this snippet code on your web page inside the \<head> tag.&#x20;

This will enable OneTalk's live chat to be displayed on your web.

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOqdaYryDe3WJQd0gns%2F-MOqg0qeP6zbJuV-w7bc%2FScreenshot%202020-12-18%20at%2023.27.45.png?alt=media\&token=e15d4282-c477-4587-b46b-aaf3d001cb73)

You can change the widgets color according to your brand color. Simply scroll down and enter your desired hex code or simply choose with the gradient slider.

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOqdaYryDe3WJQd0gns%2F-MOqgn8G_v6VT9Ws3cBN%2FScreenshot%202020-12-18%20at%2023.32.26.png?alt=media\&token=c37281c3-9d59-4a07-a597-d836fe6d9364)

Once done, don't forget to click <img src="https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOqdaYryDe3WJQd0gns%2F-MOqhqagqf1lWqbFL6mh%2Fbttn-SaveChanges.png?alt=media&#x26;token=e9220993-7e1d-4856-8d0e-a5922f6c97d6" alt="" data-size="original">&#x20;

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MOqdaYryDe3WJQd0gns%2F-MOqhup73x0T1VdjMMw0%2FScreenshot%202020-12-18%20at%2023.36.42.png?alt=media\&token=fcdd80c6-a771-4144-9bfc-e02d172cb8a5)

{% hint style="info" %}
Please refer to [**OneTalk Live Chat for Web**](https://docs.taptalk.io/onetalk-omnichannel-documentation/onetalk-channel-integration/live-chat/onetalk-web/get-started) once you have created this channel
{% endhint %}