Website Product Advisor Widget

Overview

A website assistant is one of the fastest Studio integration wins. Instead of building a brand new conversational backend, you can expose an existing peer inside your marketing site or customer portal and let it qualify traffic, answer product questions, and route visitors into existing flows.

This is especially useful when the assistant needs access to your own forms, calculators, or scheduling UI.

When to reach for this recipe

If your team needs the capabilities described above and you'd rather build on proven primitives than wire one from scratch — this is the shape to start from.

Architecture

Client SDK connects the website widget to a Studio peer. The site keeps ownership of the embedded UI and product actions such as opening a demo form, switching pricing tabs, or starting a checkout helper.

Use client tools for actions that belong in the browser, and keep the peer focused on reasoning and conversation design.

1. Register Website-Side Actions

Expose only actions that make sense in the browser shell of the site.

const websiteTools = [
  {
    type: 'function',
    function: {
      name: 'openDemoForm',
      description: 'Open the demo request form modal on the website',
      parameters: {
        type: 'object',
        properties: {
          teamSize: { type: 'string' },
        },
      },
    },
    implementation: async ({ teamSize }) => {
      openDemoModal({ teamSize });
      return 'Demo form opened';
    },
  },
  {
    type: 'function',
    function: {
      name: 'showPricingSection',
      description: 'Scroll to the pricing section and highlight a plan',
      parameters: {
        type: 'object',
        properties: {
          plan: { type: 'string' },
        },
        required: ['plan'],
      },
    },
    implementation: async ({ plan }) => {
      scrollToPricing(plan);
      return 'Pricing section highlighted';
    },
  },
];

2. Let The Peer Run Qualification

The peer qualifies the visitor, then decides whether to answer, route, or trigger a site-side action.

const response = await client.conversations.create({
  messages: [
    {
      role: 'user',
      content: 'We are a 120-person support team. Which plan should we look at and can you open the demo form?',
    },
  ],
  clientTools: websiteTools,
});
 
console.log(response.content);

Result

You get a public-facing widget that:

- Qualifies visitors with a Studio peer - Answers pricing and product questions in context - Triggers website actions such as forms and section navigation - Avoids maintaining a second custom bot stack just for the website

All recipes Suggest a change

Overview

When to reach for this recipe

Architecture

1. Register Website-Side Actions

2. Let The Peer Run Qualification

Result

Related recipes

HR Self-Service Widget

Expense Upload & Approval Widget

Mobile Peer Embedded In The App

Customer Support Bot