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
  • ​window.Pylon("show")
  • ​window.Pylon("hide")
  • ​window.Pylon("onShow")
  • ​window.Pylon("onHide")
  • ​window.Pylon("hideChatBubble")
  • ​window.Pylon("showChatBubble")
  • ​window.Pylon("onChangeUnreadMessagesCount")
  • ​window.Pylon("setNewIssueCustomFields")
  • window.Pylon("setTicketFormFields")
  • window.Pylon("showNewMessage", "string")
  • window.Pylon("showTicketForm", "string")
  • window.Pylon("showKnowledgeBaseArticle", "string")

Was this helpful?

  1. In-App Chat

JavaScript API

Available API methods to programmatically interface with the chat

PreviousIdentity VerificationNextAccounts

Last updated 1 month ago

Was this helpful?

We expose some functions in the Frontend to programmatically control the Chat window.

window.Pylon("show")

Opens the chat window. Useful for programmatically triggering the chat window from an explicit support flow or button on your site.

window.Pylon("hide")

Closes the chat window.

window.Pylon("onShow")

Pass in a callback function that is called when the chat is shown. Useful for managing state of the chat window. If you pass in null as the callback function, the existing callback is removed.

window.Pylon("onShow", function () {
  console.log("show chat!");
});

window.Pylon("onHide")

Pass in a callback function that is called when the chat is hidden. Useful for managing state of the chat window. If you pass in null as the callback function, the existing callback is removed.

window.Pylon("onHide", function () {
  console.log("hide chat!");
});

Hides the chat bubble. Useful for hiding it in situations where it’s inappropriate or it’s blocking something underneath (ie an open modal). Does not override the “Default Hide Chat Bubble” setting on the settings page.

Shows the chat bubble. Useful for hiding it in situations where it’s inappropriate or it’s blocking something underneath (ie an open modal). Does not override the “Default Hide Chat Bubble” setting on the settings page.

Pass in a callback function that is called immediately and when the unread message count changes. If you pass in null as the callback function, the existing callback is removed.

window.Pylon("onChangeUnreadMessagesCount", function (unreadCount) {
  console.log("unread changed!", unreadCount);
});

Pass in an object of custom field slugs to their values. New issues created through in-app chat messaging will have these custom fields values set.

Be sure to use the custom field slug, not the label!

Example:

window.Pylon("setNewIssueCustomFields", { user_id: "abc123" });

window.Pylon("setTicketFormFields")

Pass in an object field slugs to their values. Ticket forms in the in-app chat widget will have these values set as default values.

Note that the passed object will apply to all ticket forms. Superfluous and/or invalid fields will be ignored.

Example:

window.Pylon("setTicketFormFields", { subject: "I need help on Pylon because..." });

window.Pylon("showNewMessage", "string")

Pass in a message to prepopulate in the editor. For example, use this when a user runs into an error in your application and you want to prefill a message they can submit.

window.Pylon("showNewMessage", "I'm experiencing an issue with syncing from Google Sheets to Email and could use some assistance");

Optionally, this string can also be HTML. For example, for rendering a link. Pass an optional argument indicating the message to be shown is HTML.

NOTE: Only specific HTML tags are supported: <a>, <b>, <p>, and <i>. If other tags are used, the editor may error.

window.Pylon("showNewMessage", "I'm experiencing an issue with <a href='https://www.app.company.com/sync/123'>syncing</a> from Google Sheets to Email and could use some assistance", { isHtml: true});

window.Pylon("showTicketForm", "string")

Navigates the chat bubble to a specified ticket form, by ticket form slug.

window.Pylon("showTicketForm", "test_ticket_form");

The ticket form slug can be found in the edit ticket form page under Slug.

window.Pylon("showKnowledgeBaseArticle", "string")

Navigates the chat bubble to a specified knowledge base article, by article ID.

window.Pylon("showKnowledgeBaseArticle", "123456789");

The article ID can be found in the URL of the public view of a knowledge base article, as the first set of numbers following articles/. In the following example, the identifier is "1234567899"

It can also be found in the article settings panel in the Pylon app, under the article slug input.

window.Pylon("hideChatBubble")

window.Pylon("showChatBubble")

window.Pylon("onChangeUnreadMessagesCount")

window.Pylon("setNewIssueCustomFields")

You must first create the corresponding custom fields .

You can find the slug value on the custom fields next to the custom field.

You can find the slug value on the custom fields next to the custom field.

​
​
​
​
​
​
​
​
inside of Pylon
page
page
https://support.usepylon.com/articles/1234567899-how-to