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