> For the complete documentation index, see [llms.txt](https://docs.usepylon.com/pylon-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usepylon.com/pylon-docs/chat-widget/chat-setup.md).

# Chat Setup

## Installation <a href="#installation" id="installation"></a>

{% hint style="info" %}
Installing the Chat Widget will involve adding code to your Frontend. It may be necessary to involve an engineer to get this installed if you don’t have access to the codebase.
{% endhint %}

1. **Getting Started**<br>

   Grab your `APP_ID` [here](https://app.usepylon.com/settings/in-app-chat) ([EU](https://app.eu.usepylon.com/settings/in-app-chat)).

2. **Add Script to Body**\
   \
   Add the following `<script>` to right before the `</body>` tag in your `index.html`.\
   \
   Make sure to replace the `APP_ID` with the `APP_ID` you grabbed from Step 1.<br>

   ```html
   <script>
   (function(){var e=window;var t=document;var n=function(){n.e(arguments)};n.q=[];n.e=function(e){n.q.push(e)};e.Pylon=n;var r=function(){var e=t.createElement("script");e.setAttribute("type","text/javascript");e.setAttribute("async","true");e.setAttribute("src","https://widget.usepylon.com/widget/APP_ID");var n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};if(t.readyState==="complete"){r()}else if(e.addEventListener){e.addEventListener("load",r,false)}})();
   </script>
   ```

   \
   If you are using EU data hosting, then use the following `<script>` instead:<br>

   ```html
   <script>
   (function(){var e=window;var t=document;var n=function(){n.e(arguments)};n.q=[];n.e=function(e){n.q.push(e)};e.Pylon=n;var r=function(){var e=t.createElement("script");e.setAttribute("type","text/javascript");e.setAttribute("async","true");e.setAttribute("src","https://widget.eu.usepylon.com/widget/APP_ID");var n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};if(t.readyState==="complete"){r()}else if(e.addEventListener){e.addEventListener("load",r,false)}})();
   </script>
   ```

\ <br>

3. **Content Security Policy**<br>

   If you have a CSP, you will need to set up the following policy:

   ```
   Content-Security-Policy: 
       connect-src 'self' https://*.usepylon.com wss://*.pusher.com;
       script-src 'self' https://widget.usepylon.com;
       font-src 'self' https://*.usepylon.com;
       style-src 'self' 'unsafe-inline' https://*.usepylon.com;
       img-src 'self' https://*.usepylon.com https://pylon-avatars.s3.us-west-1.amazonaws.com;
   ```

   \
   If you are using EU data hosting, then use the following policy:<br>

   ```
   Content-Security-Policy: 
       connect-src 'self' https://*.usepylon.com wss://*.pusher.com;
       script-src 'self' https://widget.eu.usepylon.com;
       font-src 'self' https://*.usepylon.com;
       style-src 'self' 'unsafe-inline' https://*.usepylon.com;
       img-src 'self' https://*.usepylon.com https://pylon-eucentral1-avatars.s3.eu-central-1.amazonaws.com;
   ```

4. **Enable the Chat Widget**<br>

   Anywhere in your React code you can access the `window` object and set the `pylon` config.<br>

   You should add this code wherever the user has already logged in and details like the User’s email, name, etc. become available.

   ```js
   window.pylon = {
     chat_settings: {
       app_id: "APP_ID",
       email: "USER_EMAIL",
       name: "USER_FULL_NAME",

       // (Optional) If you have the user's profile image available through something like Auth0
       avatar_url: "USER_PROFILE_IMAGE_URL",

       // (Optional) If you are using Pylon's identity verification
       email_hash: "USER_EMAIL_HASH",
       
       // (Optional) If you want to force association of an issue/contact with a certain account.
       account_id: "057a3564-fc1b-4224-9292-dcf718653452",
       
       // (Optional) If you want to force association of an issue/contact with a certain account.
       // Learn more about external IDs here: https://docs.usepylon.com/pylon-docs/developer/api/external-ids.
       account_external_id: "ab38e36b-3e28-4e2d-b976-6282735b77eb"
     },
   };
   ```

   \
   Example usage in a React component:

   ```js
   useEffect(() => {
     if (user.loggedIn) {
       window.pylon = {
         chat_settings: {
           app_id: APP_ID,
           email: user.email,
           name: user.fullName,
           avatar_url: user.profileImgUrl,
         },
       };
     }
   }, [user]);
   ```

5. **Setup Chat Support Channel**\
   \
   Create a Slack channel in your workspace where you can respond to chats, like `#chat-support`.<br>

   Note: If you make this channel private, add the Pylon bot to the channel.<br>

   Set `#chat-support` as your Chat Support Channel [here](https://app.usepylon.com/settings/in-app-chat) ([EU](https://app.eu.usepylon.com/settings/in-app-chat)).

6. **Chat Widget Color**<br>

   Set the color of your chat widget [here](https://app.usepylon.com/settings/in-app-chat) ([EU](https://app.eu.usepylon.com/settings/in-app-chat)).

7. **Identity Verification**<br>

   This is optional, but **strongly recommended** before you're ready for live production chats.<br>

   [Here’s how to set it up](/pylon-docs/chat-widget/identity-verification.md).

8. **Turn it On**<br>

   At the top of the Chat Widget Settings page on the Settings tab, toggle Enable Chat Widget on.

9. **All Done!**


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.usepylon.com/pylon-docs/chat-widget/chat-setup.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.