Alps

Installing the Chat Widget on Your Website

1 min readAug 21, 2026

In this article

Add the Alps chat widget to your site with a single script tag, or use one of the official SDKs for React, Vue, iOS, Android, and more.

The chat widget lets visitors start a conversation with your team directly from your website or app, without leaving the page. Installing it takes one script tag for a plain website, or an official SDK if you're building with a specific framework.

Before you begin

Find your widget key under Settings, then Channels, then Widget. Every snippet below needs it in place of YOUR_WIDGET_KEY.

Installing with a script tag

Add this to your site, right before the closing </body> tag:

<script src="https://cdn.tryalps.com/widget.js" data-widget-key="YOUR_WIDGET_KEY"></script>

That's the whole install. The widget loads asynchronously, so it won't slow down the rest of your page.

Framework and mobile SDKs

If you're building with a specific framework, use the matching official SDK instead of the raw script tag:

  • React, Next.js, Vue – official packages that wrap the widget as a component.

  • iOS and Android – native SDKs for mobile apps.

  • React Native and Flutter – cross-platform mobile SDKs.

One widget per workspace

The widget is a single, workspace-wide channel, not something you configure separately per inbox. Every conversation started through the widget lands in the same place regardless of which page it was opened from.

Next: customize how it looks
Once the widget is installed, head to the appearance settings to match its colors, position, and messaging to your brand.

Did this answer your question?