Skip to content

Embedding the Numbers Station Widget

Introduction

You can now embed Numbers Station into your application to interact with data and analytics. The widget allows you to visualize data, generate insights, and explore your datasets directly within your existing workflows.

How to Embed our Widget

To embed the widget, include the following script in the app head:

<script src="${PUBLIC_WIDGET_URL}/loader.js" data-account="${ACCOUNT_NAME}"></script>

where:

  • ACCOUNT_NAME should be your account name on widget.numbersstation.ai
  • PUBLIC_WIDGET_URL should be the url where the widget is hosted.

The widget should now appear in the bottom-right of the screen.

API

Methods

To use the API, you can simply:

widgetApi().then((api) => {
  api.setChatId("chatID");
  api.setButtonColor("red");
});

The following methods are available to be used:

Method Description
expand() Maximizes the widget into fullscreen mode.
hide() Hides the widget.
setButtonColor(value: string) Sets the widget button color.
setChatId(chatId: string) Navigates to the chat with the provided chat ID. Only chats belonging to the account can be passed in.
setChatInput(value: string) Sets the widget chat input content.
setShowOpenInFullButton(value: boolean) Sets whether the 'Open full app' button in the sidebar is shown.
show() Shows the chat in full screen or in the smaller widget screen.
toggle() Toggles the widget visibility between hidden or shown based on full screen or the smaller chat screen.
toggleSidebar() Toggles the widget sidebar.

Attributes

Attributes can be passed into the script tag with the loader.js file like the following example:

<script src="${PUBLIC_WIDGET_URL}/loader.js" data-account="${ACCOUNT_NAME}" data-show-open-in-full-button="true" data-button-color="#171717"></script>

The following attributes can be passed into the script tag to customize the widget:

Attribute Description Type Required
data-account Sets the account name. Should be your account name on app.numbersstation.ai. string Yes
data-show-open-in-full-button Sets whether the 'Open full app' button in the sidebar is shown. "true" or "false" No
data-button-color Sets the widget button color. string No
data-show-border Sets whether to show the border around the widget frame "true" or "false" No
data-show-shadow Sets whether to show the shadow around the widget frame "true" or "false" No
data-border-radius Sets the border radius of the widget frame string No
data-show-minimize-button Sets whether to show the minimize button "true" or "false" No
data-show-expand-button Sets whether to show the expand button "true" or "false" No
data-expanded Sets whether the widget is expanded by default "true" or "false" No