Getting started with embeddable widgets

What you can embed

AppGram ships three drop-in widgets you can add to any website. Each is a single script tag hosted on the AppGram CDN — no framework, no build step, no npm install.

• Chat — chat.min.js. Floating help launcher with messaging, help articles, changelog, and a Home tab. Pulls answers from your help center via AppGram AI.
• Contact forms — forms.min.js. Embed an individual contact form inline, in a modal, or as a positioned popup.
• Testimonials wall — testimonials.min.js. Render your public testimonials live, either inline on a page or in a modal triggered from a button.

All bundles are served from https://cdn.appgram.dev/.

The two ways to configure

Every widget supports two configuration styles. Pick whichever suits the page you're embedding on.

1. Data attributes (zero JavaScript)

Set everything on the script tag itself. Best for static sites, marketing pages, and CMS templates where you can't drop arbitrary JS. Add a script tag pointing at the bundle with these attributes:

src="https://cdn.appgram.dev/chat.min.js"
data-project-id="YOUR_PROJECT_ID"
data-accent-color="#5188FF"
data-position="bottom-right"

That's a normal HTML script tag — open with script, close with /script as usual.

2. Settings object (rich configuration)

Set a settings object on window before the script tag loads. Required when you need to pass values that don't fit in attributes — callbacks, arrays, structured options.

window.appgramChatSettings = {
  projectId: 'YOUR_PROJECT_ID',
  accentColor: '#5188FF',
  teamAvatars: ['https://…/avatar1.png', 'https://…/avatar2.png'],
}

Set the object first, then load the bundle from https://cdn.appgram.dev/chat.min.js via a second script tag.

The two styles can be mixed — data attributes always win over the settings object for any key set in both places.

Where to find your project ID

Open your AppGram dashboard, pick the project, and copy the project ID from the project settings page. Every embed widget needs this. The chat widget also uses your org slug and project slug to fetch help articles and changelog entries — set those whenever you want those tabs populated.

Theming, in one sentence

Every widget honours light / dark / auto themes and accepts a brand accent colour. If you customise your widget in the AppGram dashboard, the embed will fetch and apply those styles automatically.

What ships with every embed

• "Powered by AppGram" badge — a small pill at the bottom of every widget linking to appgram.dev. It inverts to white-on-dark or black-on-light automatically.
• No layout shift — widgets render inside their own stacking context and never push your page around.
• No tracking pixels — events stay between the visitor and your project's API.

Next steps

• Chat widget — install & customize
• Contact forms — inline, modal, popup
• Testimonials wall