Skip to content

Documentation

Install the widget

One script tag. Paste it once and the chat button appears on every page.

The snippet

<script src="https://ticketdm.com/w.js" data-key="pk_live_…" data-cfasync="false" async></script>

Replace pk_live_… with your own key from the dashboard.

  • async means the widget never slows your page down.
  • data-cfasync="false" stops Cloudflare Rocket Loader from deferring the script. It is safe to keep even if you do not use Cloudflare.
  • Optional but recommended: add your website's domain to the allowed sites in the widget settings. Once the list has entries, the widget only runs on those sites. Each site includes its subdomains, so example.com also covers www.example.com and shop.example.com.
  • Optional: add data-sound="true" to play a short sound when a reply arrives while the tab is in the background.
  • Optional: if your site sends a strict Content Security Policy, see Strict Content Security Policy below.

Jump to your platform: Plain HTML · WordPress · Shopify · Webflow · Framer · Squarespace · Wix

Plain HTML

Open each page template (or your shared layout file) and paste the snippet just before the closing </body> tag.

<body>
  … your page …
  <script src="https://ticketdm.com/w.js" data-key="pk_live_…" data-cfasync="false" async></script>
</body>

WordPress

Two ways. The plugin route needs no code editing.

  1. With a plugin. Install a header and footer scripts plugin (for example "WPCode" or "Insert Headers and Footers"). Add a new snippet of type HTML, paste the script tag, set the location to Footer and activate it.
  2. In your theme. Go to Appearance → Theme File Editor, open footer.php and paste the snippet just before </body>. Use a child theme so theme updates do not remove it.

If you use a caching plugin, clear the cache after you add the snippet.

Shopify

  1. In your Shopify admin go to Online Store → Themes.
  2. Next to your live theme choose … → Edit code.
  3. Open layout/theme.liquid.
  4. Paste the snippet just before </body> and save.

Shopify checkout pages are locked down on most plans, so the widget shows on your storefront pages.

Webflow

  1. Open your project and go to Project settings → Custom code.
  2. Paste the snippet into the Footer code box.
  3. Save, then publish your site. Custom code only runs on the published site, not in the designer.

Framer

  1. Open your project and go to Site settings → Custom code.
  2. Paste the snippet into the End of <body> tag field.
  3. Publish the site.

Squarespace

  1. Go to Settings → Advanced → Code Injection.
  2. Paste the snippet into the Footer box and save.

Code injection needs a plan that supports it. It does not run in the editor preview, so check your live site.

Wix

  1. Go to Settings → Custom code in your site dashboard.
  2. Click Add custom code and paste the snippet.
  3. Set Add code to pages to all pages, and Place code in to Body - end.
  4. Apply, then publish.

Custom code needs a premium plan with a connected domain.

Check that it works

  1. Open your live site in a private window. The chat button should appear in the corner.
  2. Send a message. A new topic should appear in this website's Telegram group.

The button does not appear

  • Make sure the snippet is on the published site, not only in an editor or preview.
  • If you set allowed sites, check that your domain is in the list. You do not need to add the www version, because every subdomain is included.
  • Clear your site's cache or CDN cache after adding the snippet.
  • Open your browser's developer console and look for blocked requests. A content security policy on your site may need to allow https://ticketdm.com for scripts and frames. See Strict Content Security Policy.

Strict Content Security Policy

If your site sends a Content-Security-Policy header, the widget needs only two sources:

script-src https://ticketdm.com; frame-src https://ticketdm.com

The chat itself runs in its own frame on ticketdm.com, so it follows its own policy and your connect-src can stay locked down.

The one thing the small loader script does on its own is two background requests when a page loads: one to check whether the visitor has an open conversation, and one to tell us the widget is installed. A policy with connect-src 'none' blocks both and the browser prints errors in the console. Add the data-no-fetch attribute and the loader makes no requests of its own:

<script src="https://ticketdm.com/w.js" data-key="pk_live_…" data-no-fetch data-cfasync="false" async></script>

Everything else works as usual. The unread badge and proactive messages are read from the chat frame instead, and the frame also reports that the widget is installed on your site.

If your policy also restricts images and you use proactive messages with a photo, add img-src https://ticketdm.com too. Without it the message shows the sender's initials instead of the photo.

← Getting startedTelegram commands →