Use case

Website Product Advisor Widget

Embed a Studio peer into a public website to qualify visitors, answer pricing questions, and trigger product actions without building a separate bot backend.

• Stack Client SDK
• Pattern Chat · Widget
• Read ~7 min

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 use case

If your team needs the capabilities described above and you would 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

---

Products used

This pattern is built on one Cognipeer product.

@cognipeer/sdk

Client SDK

Connect apps to Cognipeer Studio peers, conversations, and client-side tool execution.

The peer itself is authored and maintained in Cognipeer Studio — the SDK only connects your product to it.

Related use cases

Chat · Widget

HR Self-Service Widget

Embed a Studio-powered HR assistant into an employee portal for policy Q&A, leave requests, onboarding help, and document routing.

Chat · Widget

Expense Upload & Approval Widget

Let employees upload receipts, extract fields, and submit expense requests through a Studio-powered finance widget embedded in your product.

Chat · Mobile

Mobile Peer Embedded In The App

Run a Studio peer directly inside a mobile app so it can answer users and trigger native app actions such as screen navigation, camera capture, and task execution.

Chat · Support

Customer Support Bot

Deploy conversational AI with streaming responses, human-in-the-loop escalation, guardrails, and tool transparency.

See every pattern on the use case index, or browse all Cognipeer libraries.