# Website widgets

A widget is a chat, a booking card, or a form you paste onto your own site. Create it in Company Settings, under Widgets, then open Deploy and copy the embed.

On Deploy, Allowed sites is one domain per line. Leave it empty to allow any site. textwork.co is always allowed, so the preview in the dashboard works.

## Chat widget

A chat widget runs on the page, in the browser, using the script you pin to it. TextWork does not text the visitor's phone.

1. Open Company Settings, then Widgets, and create a chat widget. Set the greeting and choose the script.
2. Open the Deploy tab, copy the embed, and paste it before the closing `</body>` tag.

```html
<script src="https://textwork.co/widget.js" data-widget="YOUR_PUBLIC_KEY" async></script>
```

Until your page says who the visitor is, the conversation is saved on a contact named Website visitor.

### Pass the visitor's name, email, and phone

The chat sits in a frame and cannot read your page. When your site already knows the person, hand their name, email, and phone to the embed. The conversation is then saved on that person.

Call this once the page knows who they are. Any of the three can be left out.

```html
<script>
  TextWorkWidget.identify({
    name: "Maria Lopez",
    email: "maria@example.com",
    phone: "+1 555 123 4567"
  });
</script>
```

If the server renders the page and already has the person, put the same values on the script tag.

```html
<script
  src="https://textwork.co/widget.js"
  data-widget="YOUR_PUBLIC_KEY"
  data-name="Maria Lopez"
  data-email="maria@example.com"
  data-phone="+1 555 123 4567"
  async
></script>
```

Call `identify` before the visitor sends a message, so the chat starts under their name. Passing the same person again updates the contact. If that email is already on another contact at your company, the name and phone are still saved and the email is left as it was.

TextWork does not text the phone you pass. The conversation stays in the browser.

## Booking widget

A booking widget embeds one of your meeting pages. The visitor picks a time on the card. It does not start a text conversation.

Create it under Company Settings, then Widgets, choose Booking, and point it at a meeting page. Paste the embed where the card should appear.

```html
<script src="https://textwork.co/widget.js" data-widget="YOUR_PUBLIC_KEY" data-inline async></script>
```

Add `data-target="#id"` to render the card inside a specific element. The card stays at most 36rem wide and grows with its content.

## Form widget

A form widget collects answers on your site and then starts a script by text. It does not ask the visitor to pick a time. The form needs a phone field. Within a few seconds of a valid submit, TextWork texts that number and runs the script you attached. The other answers are passed to the script as context. If that phone already belongs to a contact at your company, that contact is reused.

1. Open Company Settings, then Widgets, and create a form widget. Pick the script that should text them.
2. Open Edit form to change the fields, the button, and the consent line.
3. Open the Deploy tab, copy the embed, and paste it where the card should appear.

```html
<script src="https://textwork.co/widget.js" data-widget="YOUR_PUBLIC_KEY" data-inline async></script>
```

Add `data-target="#id"` to render the card inside a specific element. The card stays at most 36rem wide and grows with its content.

Hidden fields can be filled by the page. Add `data-context` with their names.

```html
<script
  src="https://textwork.co/widget.js"
  data-widget="YOUR_PUBLIC_KEY"
  data-inline
  data-context='{"listing_address":"204 E Oakland Ave"}'
  async
></script>
```

Only names the form already has are kept.