chore: rename deploy/embed widget section to add to website

This commit is contained in:
Sabiha Khan 2026-05-07 14:56:24 +05:30
parent 0282eb3225
commit 81a363b06e
9 changed files with 49 additions and 22 deletions

View file

@ -1,4 +1,4 @@
import { Check, Copy, Loader2, Mic, Plus, Rocket, Trash2 } from "lucide-react";
import { Check, Copy, ExternalLink, Loader2, Mic, Plus, Rocket, Trash2 } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import {
@ -25,6 +25,7 @@ import {
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";
import { WIDGET_MODE_DOCUMENTATION_URLS } from "@/constants/documentation";
interface EmbedDialogProps {
open: boolean;
@ -177,12 +178,23 @@ export function EmbedDialog({
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-4xl w-full max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Rocket className="h-5 w-5" />
Deploy Workflow
</DialogTitle>
<div className="flex items-center justify-between">
<DialogTitle className="flex items-center gap-2">
<Rocket className="h-5 w-5" />
Configure Widget
</DialogTitle>
<a
href={WIDGET_MODE_DOCUMENTATION_URLS[embedMode]}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors pr-6"
>
Docs
<ExternalLink className="h-3.5 w-3.5" />
</a>
</div>
<DialogDescription>
Embed &quot;{workflowName}&quot; on any website with a simple script tag
Add &quot;{workflowName}&quot; to any website with a simple script tag.
</DialogDescription>
</DialogHeader>
@ -542,8 +554,8 @@ document.getElementById('talk-btn').addEventListener('click', () => {
</Button>
</div>
{/* Embed Script (shows after saving) */}
{embedToken && embedToken.is_active && (
{/* Embed Script (shows after saving; placeholder before) */}
{embedToken && embedToken.is_active ? (
<>
<Separator />
<div className="space-y-3">
@ -578,6 +590,16 @@ document.getElementById('talk-btn').addEventListener('click', () => {
</p>
</div>
</>
) : (
<>
<Separator />
<div className="space-y-3">
<Label className="text-muted-foreground">Embed Code</Label>
<div className="rounded-lg border border-dashed bg-muted/30 px-4 py-8 text-center text-sm text-muted-foreground">
Click <span className="font-medium">Save Configurations</span> to generate your embed script.
</div>
</div>
</>
)}
</>
)}

View file

@ -79,7 +79,7 @@ const NAV_ITEMS = [
{ id: "dictionary", label: "Dictionary", icon: BookA },
{ id: "voicemail", label: "Voicemail Detection", icon: PhoneOff },
{ id: "recordings", label: "Recordings", icon: Mic },
{ id: "deployment", label: "Deployment", icon: Rocket },
{ id: "deployment", label: "Add to Website", icon: Rocket },
{ id: "report", label: "Report", icon: FileDown },
{ id: "identity", label: "Agent UUID", icon: Fingerprint },
];
@ -1294,17 +1294,16 @@ function WorkflowSettingsInner({
<CardHeader>
<CardTitle className="flex items-center gap-2 text-base">
<Rocket className="h-4 w-4" />
Deployment
Add to Website
</CardTitle>
<CardDescription>
Generate and manage the embed configuration to deploy this workflow on external
websites.{" "}
Configure a widget to add this voice agent to your website.{" "}
<a href={SETTINGS_DOCUMENTATION_URLS.deployment} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-0.5 underline">Learn more <ExternalLink className="h-3 w-3" /></a>
</CardDescription>
</CardHeader>
<CardFooter className="border-t pt-6">
<Button variant="outline" onClick={() => setIsEmbedDialogOpen(true)}>
Configure Embed
Configure Widget
</Button>
</CardFooter>
</Card>

View file

@ -24,7 +24,13 @@ export const SETTINGS_DOCUMENTATION_URLS: Record<string, string> = {
templateVariables: `${DOCS_BASE}/voice-agent/template-variables`,
recordings: `${DOCS_BASE}/voice-agent/pre-recorded-audio`,
deployment: `${DOCS_BASE}/deployment/web-widget`,
deployment: `${DOCS_BASE}/voice-agent/add-to-website`,
};
export const WIDGET_MODE_DOCUMENTATION_URLS: Record<"floating" | "inline" | "headless", string> = {
floating: `${DOCS_BASE}/voice-agent/add-to-website#floating-widget`,
inline: `${DOCS_BASE}/voice-agent/add-to-website#inline-component`,
headless: `${DOCS_BASE}/voice-agent/add-to-website#headless-mode`,
};
export const TOOL_DOCUMENTATION_URLS: Record<string, string> = {