Vanilla js

If you don’t use a frontend framework, you can drop the widget straight into a plain HTML page.
This is the quickest way to get started.

Steps

Add the stylesheet
Include the widget CSS in your <head> so the chat widget loads with the right styles.
Load the script
Use the minified script from unpkg in your <body>.
Initialize the widget
Call window.TicketpingChat.init() with your app’s configuration.

Example

HTML

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@ticketping/chat-widget@latest/dist/widget.css"
    />
  </head>
  <body>
    <script src="https://unpkg.com/@ticketping/chat-widget@latest/dist/widget.min.js"></script>
    <script>
      window.TicketpingChat.init({
        appId: "your-app-id",
        teamSlug: "your-team-slug",
        teamLogoIcon: "cdn-link-to-your-logo-square",
      });
    </script>
  </body>
</html>

ES Module

npm install @ticketping/chat-widget

import TicketpingChat from "@ticketping/chat-widget";
import "@ticketping/chat-widget/style";

const chat = new TicketpingChat({
  appId: "your-app-id",
  teamSlug: "your-team-slug",
  teamLogoIcon: "cdn-link-to-your-logo-square",
});

Want the chat widget to recognize your users? Check out our authentication guide.

Authentication in Chat widget

Identify authenticated user with JWT