Website Widget (JS / HTML / npm)

Two options for plain websites:

• Via npm: npm i chatgram-widget, then initialise it in your JavaScript entry point (see the package’s docs page).
• Via embed snippet: copy and paste the Chatgram embed snippet into your HTML page (before the closing </body> tag typically works well).

Either way, the widget automatically reads your site’s domain. As long as the domain is verified (see Domain Verification), Chatgram knows which admin to notify when someone messages you.

In your project directory, run:

npm i chatgram-widget

Then in your JavaScript entry point (or the main file for your framework), import and initialise the widget:

import { chatgram } from 'chatgram-widget';
chatgram.init();

The exact API depends on the current package version. See the package page on npmjs.com for the up-to-date documentation.

Once initialised, a Chatgram icon appears in the bottom-right corner of your page. Visitors tap it to open the contact form.

If your site doesn’t use npm (or you just want a quick drop-in), you can load the Chatgram widget from a CDN via a <script> tag. The exact URL is documented on the chatgram-widget package page.

A typical setup looks like:

<script src="https://cdn.example.com/chatgram-widget/latest/chatgram-widget.min.js"></script>
<script>
  chatgram.init();
</script>

For a JavaScript app (React, Vue, Svelte, plain JS, or similar), install the npm package and call the init function once when your app boots. The typical pattern:

// e.g. in your main.js / app.tsx / entry point
import { chatgram } from 'chatgram-widget';
chatgram.init({
  // optional configuration goes here
});

The widget attaches itself to the page and appears in a corner. You call init once, not per component render.

For frameworks with strict mount / unmount cycles (like React Strict Mode in development), guard against double-initialisation by only calling init if the widget isn’t already loaded.

The widget reads the domain of the page it’s running on (using window.location.hostname). Chatgram then looks up which admin owns that domain and delivers messages to them.

This is why domain verification matters: Chatgram needs to know that you own the domain before it will accept and route messages for it. See Domain Verification.

Yes. The widget is customisable. You can typically configure:

• The icon position (which corner of the page)
• The colour or theme to match your brand
• The form fields shown to visitors (which are required, which are optional)
• Any custom text or labels

Exact customisation options depend on the package version. Consult the chatgram-widget package documentation for the current list of props / config options.

By default, the Chatgram chat icon appears in the bottom-right corner of your page, floating above your content. This is the standard “chat bubble” position that most visitors instinctively look for.

If bottom-right conflicts with another element on your site (a cookie banner, another chat widget, a “back to top” button), you can reposition the widget via configuration when you initialise it.