Installation

Installing In-App Chat 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.

1

Getting Started

Grab your APP_ID here.

2

Add Script to Body

Add the following <script> to right before the </body> tag in your index.html.

Maks sure to replace the APP_ID with the APP_ID you grabbed from Step 1.

<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>
3

Enable the Chat Widget

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

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

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",
  },
};

Example usage in a React component:

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

Setup Chat Support Alerts Channel

Create a Slack channel in your workspace called #chat-support.

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

Set #chat-support as your Chat Support Channel here.

5

Chat Widget Color

Set the color of your chat widget here.

6

Content Security Policy

If you have a CSP, you will need to allowlist *.usepylon.com, *.posthog.com, and *.pusher.com. For context, we use PostHog for product metrics and Pusher for sending chat messages in realtime.

7

Identity Verification

This is optional, but recommended.

Here’s how to set it up.

8

All Done!