HTML in-app messages

An HTML message talks to your app or site through one object, treebars. Its methods are the standard ones, and most messages need none of them, because a few attributes do the tracking.

Where it runs

The script in a message — yours, and the small runtime we add for the attributes below — runs where the SDK hosts the bridge: the Web SDK 0.4.0 and the Android SDK 0.4.0 and the iOS SDK 0.4.0 and later. The Android and iOS SDKs host it from their next release; until then an app draws the markup with scripts off, so keep a way out that needs none, such as a link to treebars://dismiss. The editor says how many of your devices can run it.

The message is drawn in a sandboxed frame: it cannot read your page or your app's storage, and it has no fetch, XHR or WebSocket. Images, fonts and styles load from any https address. Every link goes to the SDK, which records the press and then opens it.

On a website the SDK shows a message with no set-up past init: In-app messages on a website has when it appears, how to switch it off, and what to check when it does not.

Tracking without writing any

These work with no script of your own. Put them on the elements, and the message does the rest.

Attribute

data-tb-screen

Example

data-tb-screen="welcome"

What it does

One screen of a flow. The first shows; the rest wait. data-tb-final on a screen records the flow as completed.

Attribute

data-tb-id

Example

data-tb-id="cta"

What it does

Reports the element’s clicks under that id.

Attribute

data-tb-action

Example

next, back, screen:done, dismiss, submit, deeplink:app://orders, url:https://…, landing:https://…, push, copy:CODE, share:text, store-review, custom, app:add_to_cart, navigate:Cart

What it does

Acts, after the click is recorded. app: and navigate: hand your app a named action, with data-tb-props as its payload, which it subscribes to with onAction (SDK 0.11.0).

Attribute

data-tb-event

Example

data-tb-event="offer_claimed" data-tb-props='{"plan":"annual"}'

What it does

Records one of your events.

Attribute

data-tb-save

Example

data-tb-save="email"

What it does

Keeps the answer when the form submits: an email or phone as an opt-in, anything else as a trait.

Attribute

data-tb-then

Example

data-tb-then="next"

What it does

On whatever submits — the button, or its form — or on a push ask: where the message goes once the answers are sent or the permission is answered, such as a thanks screen or dismiss.

Attribute

data-tb-track

Example

data-tb-track="off"

What it does

Turns automatic click tracking off inside it.

<main>
  <section data-tb-screen="welcome">
    <h1>Welcome, {{ user.first_name | default: "there" }}</h1>
    <button data-tb-id="start" data-tb-action="next">Get started</button>
    <button data-tb-id="skip" data-tb-action="dismiss">Not now</button>
  </section>
  <section data-tb-screen="interests" hidden>
    <fieldset data-tb-save="interests">
      <label><input type="checkbox" value="shoes"> Shoes</label>
      <label><input type="checkbox" value="kitchen"> Kitchen</label>
    </fieldset>
    <button data-tb-id="continue" data-tb-event="interests_selected" data-tb-action="next">Continue</button>
  </section>
  <section data-tb-screen="done" data-tb-final hidden>
    <p>Your code is SPRING10.</p>
    <button data-tb-id="copy" data-tb-action="copy:SPRING10">Copy code</button>
    <a href="treebars://dismiss">Close</a>
  </section>
</main>

The methods

Every method returns a Promise, and every one resolves: a refusal is { ok: false, reason }, never an error, so a template brought over from another platform — written against a bridge that returns nothing, and never catching — behaves as it did there.

Your own events

trackEvent records only an event the message declares — a data-tb-event, a trackEvent('name', …) written with its name in quotes, or a name in a manifest, <script type="application/json" id="tb-manifest">{ "events": ["quiz_answered"] }</script> for a name your script builds. At most 20 a display, and a repeat of one name within 250 ms is dropped. The campaign is attached every time, so the fifth and sixth arguments some bridges take for that are accepted here and ignored.

Examples

<button onclick="treebars.setEmailId(email.value);
                 treebars.trackEvent('response_submitted', {email: email.value}, {}, {}, false, true);
                 treebars.trackClick(1); treebars.dismissMessage()">Sign me up</button>

const answer = await treebars.requestNotificationPermission();
if (answer === 'denied') treebars.showScreen('push-later');
else treebars.nextScreen();

const streak = (await treebars.getStoredValue('streak')) ?? 0;
await treebars.setStoredValue('streak', streak + 1);

Writing one with an agent

Everything on this page, as one file an agent can read — Claude Code, Cursor, or your own model through the Treebars connector: agents.md, with the bridge as TypeScript in treebars.d.ts. Both are built from the same tables the SDKs and publish run on, so they describe what your devices do today. Point the agent at the first and give it a brief; what it writes is checked by the same rules as publish, and becomes a draft a person applies.

Bringing a template from another platform

The only global is treebars. A template that still calls the global its own platform gave it is refused at publish, naming it, and the code view rewrites it in one click — the calls themselves do not change. Personalisation is written our way: {{ user.first_name }} for {{UserAttribute['First Name']}}, and a token inside a script is escaped for the script.