Skip to content
Design System
العربية

Website widget

import"@truvar-ai/design-system/widget"

Website widget

The AI agent businesses put on their own website with one line of code. It doesn't just answer: it shows its steps, offers times, asks before it books, collects details, hands over to a person, and takes voice notes and voice calls. Try it on the sample clinic below.

Book now

Zamalek, Cairo · Open till 10 PM

Gentle dentistry, booked in a minute.

Check-ups, cleaning and whitening with Dr. Sara and Dr. Omar. Ask our assistant anything, day or night.

Cleaningfrom EGP 600
Check-upfrom EGP 450
Whiteningfrom EGP 2,500

Add it to a website

Built on <script> · WebWidget

One snippet before </body>. The widget loads in its own Shadow DOM, so the website's styles can't break it and it can't touch the website. React apps can use the component directly.

<!-- Nile Dental: Truvar AI agent -->
<script>
  window.TruvarWidget = {
    workspace: "wk_nile_dental",
    agent: "Layla",
    accent: "#0f6e5c",
    position: "end", // end = right in English, left in Arabic
    launcher: "icon",
    language: "auto",
    greeting: "auto",
    features: { voiceNotes: true, call: true, attachments: true }
  };
</script>
<script async src="https://cdn.truvar.ai/widget/v1.js"></script>

Building blocks

Agent steps

Built on AgentSteps

Shows what the agent is doing while it does it, then folds into one line.

  1. Checking Dr. Sara's calendar
  2. Finding 45-minute gaps
  3. Holding the time

Time slots

Built on SlotPicker

Days, then times. Picking one is the reply. Locks once chosen.

Pick a time

Approval

Built on WidgetApproval

Before anything that commits the visitor, the agent asks. Nothing is booked or paid without this OK.

Book this appointment?Needs your OK
Service
Check-up and X-ray
When
Wed, 7:30 PM
Price
EGP 450

Inline form

Built on InlineForm

Collects details inside the chat, with real validation (the phone field checks the number for the country).

Your details

Choice cards

Built on ChoiceCards

Services or products, side by side. Swipe on phones.

Cleaning and polish45 minEGP 600
Check-up and X-ray30 minEGP 450
Whitening60 minEGP 2,500

Result

Built on ResultCard

What got done, with the next steps.

You're booked!Wed, 7:30 PM with Dr. Sara
Booking
#ND-4821

Messages

Built on WidgetItem

Text, voice notes with a transcript, files, a teammate joining, the call summary and the rating.

0:09

Yes, 6:00 PM and 7:30 PM are open.

x-ray-2025.pdf820 KB

Mona Adel from the front desk joined

Voice call · 1:12Booked a check-up for Wednesday, 7:30 PM.
How did we do?

Voice call

Built on WidgetCall

A live call inside the widget, with captions so it works with the sound off.

Layla

0:42Layla is speaking

  1. YouIs Wednesday evening free?
  2. LaylaYes, 7:30 PM with Dr. Sara. Shall I book it?