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.

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