Code editor

The code editor gives you full control over a widget. You write the UI in a JSX-like markup language over Bookbag's component library, declare the data the widget expects, provide example data for the live preview, and define the functions that run when a customer interacts.

The four parts of a widget

The markup language

Widget markup looks like JSX but is not React — it is parsed and evaluated by a safe interpreter (no eval). You can reference data fields, use ternaries and .map() to repeat over arrays, and compose the built-in components. Here is a minimal lead form:

<Card size="md" asForm>
  <Col gap={4}>
    <Title value={title} size="lg" weight="medium" />
    <Text value={subtitle} size="sm" color="secondary" />
    <Divider />
    <Col gap={2}>
      <Label value="Work email" fieldName="email" />
      <Input name="email" inputType="email" placeholder="you@example.com" required />
    </Col>
    <Button label="Submit" submit variant="solid" color="primary" block
      onClickAction={{ functionName: "submitLead" }} />
  </Col>
</Card>

<ListView orientation="horizontal" gap={2}>
  {products.map((product) => (
    <ListViewItem key={product.id}>
      <Col gap={2} width={240}>
        <Image src={product.image} height={190} fit="cover" radius="md" />
        <Title value={product.name} size="xs" weight="semibold" />
        <Text value={product.price} size="md" weight="medium" />
        <Button label="Add to cart" block
          onClickAction={{ functionName: "addToCart",
            additionalInputs: { productId: product.id } }} />
      </Col>
    </ListViewItem>
  ))}
</ListView>

The data schema

The schema declares what data the widget needs. It is written as a Zod schema and mirrored as JSON, so the AI builder, your actions, and the agent all agree on the shape. The .describe() text helps the model populate fields correctly at runtime.

z.object({
  title: z.string().describe("Heading"),
  subtitle: z.string().describe("Subheading"),
  products: z.array(z.object({
    id: z.string(),
    name: z.string(),
    price: z.string(),
    image: z.string(),
  })).describe("Products to display"),
})

Functions: making it interactive

Buttons and inputs trigger functions. A function has a type that decides what happens when it runs:

{
  submitLead: {
    type: "message",
    messageTemplate: "New lead from {{name}} ({{email}})",
    onExecute: { action: "dismiss" }
  }
}

States: conditional UI

A state shows or hides part of the widget based on its data. A common pattern is a form that flips to a confirmation after submit: wrap the form in a FormView state and the thank-you in a Submitted state, each shown conditionally on a data field.

Live preview and example data

The editor renders a live preview from your example data, so you see the widget exactly as a customer would — themed light or dark to match the chat. Add named examples to preview specific states (for instance, an example with submitted: true to see the confirmation view).

Import, export, and duplicate

You can duplicate any widget to branch from a working version, export a widget to move it between agents or workspaces, and import one back in. Templates are just exported widgets you can duplicate and edit.

What's next