Skip to content
TellsU
Launching soon. These docs describe TellsU as it will be at launch.

Widget options

import { TellsU } from '@tellsu/widget';


const widget = TellsU.mount('#feedback', {
  appKey: 'pk_yourpublickey', // required; everything else is optional
  version: '2.4.1',
});


widget.unmount(); // removes it

TellsU.mount(target, options) takes a selector or an element, and replaces its contents with the widget. It throws if nothing matches the target, or if appKey doesn’t start pk_.

Options

Section titled “Options”
Option Default What it does
appKey required Your app’s public key
version none Your app’s version
sentiment true The three faces beside the button; false leaves only the button
colorScheme 'auto' 'auto' follows the system; 'light' or 'dark' to match your app
color TellsU’s teal Your brand color, as a six-digit hex code such as '#E85D04'
env {} Environment values
screen found by itself Which part of your app the widget is on; '' sends none
badge true The “Powered by TellsU” badge; false on the paid plan

A fuller example

Section titled “A fuller example”

A custom app (an Adobe Commerce extension) on the paid plan, using most options:

import { TellsU } from '@tellsu/widget';


TellsU.mount('#feedback', {
  appKey: 'pk_yourpublickey', // required; everything else is optional
  version: '2.4.1',
  colorScheme: isDark ? 'dark' : 'light', // match your app's theme
  color: '#E85D04', // your brand color
  screen: 'settings', // the part of your app it's on
  badge: false, // paid plan
  env: {
    host: 'Adobe Commerce', // what your app runs inside
    host_version: '2.4.7',
    runtime: 'PHP',
    runtime_version: '8.3',
    channel: 'beta',
    edition: 'pro',
    sync: 'on', // your own value: paid plan, allowed in Form › Environment
  },
});

Environment values

Section titled “Environment values”

env takes these names:

Name For example
channel stable, beta
edition free, pro
host Adobe Commerce, VS Code, Shopify
host_version 2.4.7
runtime Node, PHP
runtime_version 22.11

Which of these your app keeps, and which are filled in for you, depends on its platform: see What’s sent in its quick start.

true and false become 1 and 0, numbers become text, and empty values are left out. The browser and operating system aren’t options: the hosted page detects them.

Your own values

Section titled “Your own values”

On the paid plan, you can send values of your own under any other name, such as { sync: 'on' }. Allow each name first in your app’s Form › Environment tab: lower-case letters, digits and underscores, starting with a letter, up to 40 characters. Values under names you haven’t allowed are dropped, and so are all of them on the free plan, without errors.

What’s never sent

Section titled “What’s never sent”

Every value is shown to your user before they send it. Values that look like an email address or a long token are masked before they leave your app, and every value is cut to 100 characters, so a secret passed by mistake never reaches the address.

Screen

Section titled “Screen”

The screen is a short name for the part of your app the feedback came from, such as popup or settings. It’s never an address. Unless you set it, the widget finds one where it can: see What’s sent in your app’s quick start.

On the paid plan, a screen can pick a heading you’ve written for it, such as “How’s the Settings page working for you?”.

On your page

Section titled “On your page”

The widget is a set of plain links. It makes no requests, loads nothing from TellsU and sends nothing until someone clicks it, and every part opens the hosted page in a new tab. It sits in a shadow root, so your page’s CSS doesn’t change it and its CSS doesn’t change your page.