Pylon
Knowledge BaseWebsiteChangelogBook a DemoLogin
  • Getting Started
    • Introduction
    • Quick Start
    • Slack Setup
    • Channel Configuration
    • User Guide
  • Support Workflows
    • Omnichannel Support
    • Issues
      • Views
      • Statuses
      • Message Editor
      • Copilot
      • Internal Threads
      • Proactive Issues
      • Translation
      • Bulk actions
      • Issue Groups
    • SLAs
    • Support Hours
    • CSAT
    • Ticket Forms
    • Assignment Rules
      • User Status
    • Email
  • Platform
    • Custom Fields
    • Required and Conditional Fields
    • Tags
    • Teams
    • Triggers
      • Logs & History
    • Macros
    • Command Search
    • Roles & User Management
    • Training Data
    • Ask AI
  • AI Agents
    • Overview
    • Build
      • Resources
    • Test
  • Knowledge Base
    • Overview
    • Articles & Collections
      • Editor
      • Copilot
      • Templates
      • Collaboration
    • Knowledge Gaps
    • Styling & Customization
    • Custom Authentication
    • Search
    • Translation
  • Customer Portal
    • Overview
    • Styling & Customization
    • Access Control
    • Portal Experience
    • Custom Authentication
  • In-App Chat
    • Overview
    • Styling
    • Functionality
    • Chat Experience
    • Chat Setup
    • Identity Verification
    • JavaScript API
  • Account Management
    • Accounts
    • Views
    • Notebooks
      • Blocks
    • Highlights
    • Fields
    • Copilot
    • Activities
      • Custom Activities
  • Reporting & Analytics
    • Analytics
    • Default Dashboards
    • Custom Dashboards
  • Broadcasts
    • Overview
    • Create a Broadcast
    • Analytics
  • Integrations
    • CRM
      • Salesforce
      • Hubspot
      • Attio
      • Pipedrive
    • Ticketing
      • Linear
      • GitHub Issues
      • Asana
      • Jira
    • Alerting
      • PagerDuty
      • Opsgenie
    • Chat
      • Slack
        • Internal Threads
        • Collect Data
        • Support Ticket Flow
        • Welcome Message
        • Bookmarks
        • Onboard Employees
        • Left Company
        • Slack Community
      • Microsoft Teams
      • Discord
    • Incident Management
      • incident.io
    • Call Recording
      • Gong
      • Fathom
      • Grain
      • Fireflies
  • Data Warehouse
    • Snowflake
    • BigQuery
  • Developer
    • API
      • Authentication
      • Errors
      • API reference
        • Attachments
        • Accounts
          • Activities
          • Highlights
        • Contacts
        • Custom Fields
        • Issues
        • Knowledge Base
        • Me
        • Messages
        • Tags
        • Teams
        • Ticket Forms
        • User roles
        • Users
      • External IDs
    • Custom Apps
    • Embedded Iframes
    • Webhooks
Powered by GitBook
On this page

Was this helpful?

  1. In-App Chat

Chat Setup

How to setup Pylon's in-app chat

PreviousChat ExperienceNextIdentity Verification

Last updated 16 days ago

Was this helpful?

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 .

  1. 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.

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

  1. Content Security Policy

    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' https://*.usepylon.com;
        img-src 'self' https://*.usepylon.com https://pylon-avatars.s3.us-west-1.amazonaws.com https://d3vl36l12sfx26.cloudfront.net;

For context, we use PostHog for product metrics and Pusher for sending realtime chat messages.

  1. 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 wherever 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",
        
        // (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:

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

  1. Setup Chat Support Channel Create a Slack channel in your workspace where you can respond to chats, like #chat-support.

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

  1. Chat Widget Color

  1. Identity Verification

    This is optional, but recommended.

  1. Turn it On

    At the top of the In-App Chat Settings page on the Settings tab, toggle Enable In-App Chat on.

  1. All Done!

Set #chat-support as your Chat Support Channel .

Set the color of your chat widget .

.

here
here
here
Here’s how to set it up