mirror of
https://github.com/dograh-hq/dograh.git
synced 2026-06-07 07:55:16 +02:00
chore: rename deploy/embed widget section to add to website
This commit is contained in:
Sabiha Khan
parent
0282eb3225
commit
81a363b06e
9 changed files with 49 additions and 22 deletions
|
|
@ -8,5 +8,4 @@ You can deploy Dograh Platform using Docker on a remote server using Docker, eit
|
|||
|
||||
- [Docker](docker)
|
||||
- [Custom Domain](custom-domain)
|
||||
- [Add to Website](web-widget)
|
||||
- [Heroku](heroku)
|
||||
|
|
|
|||
|
|
@ -88,7 +88,8 @@
|
|||
"voice-agent/api-trigger",
|
||||
"voice-agent/webhook"
|
||||
]
|
||||
}
|
||||
},
|
||||
"voice-agent/add-to-website"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -145,7 +146,6 @@
|
|||
"deployment/docker",
|
||||
"deployment/custom-domain",
|
||||
"deployment/update",
|
||||
"deployment/web-widget",
|
||||
"deployment/heroku"
|
||||
]
|
||||
},
|
||||
|
|
|
|||
BIN
docs/images/add-to-website.png
Normal file
BIN
docs/images/add-to-website.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 318 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 237 KiB After Width: | Height: | Size: 222 KiB |
|
|
@ -1,19 +1,20 @@
|
|||
---
|
||||
title: Add to Website
|
||||
description: Add your Dograh voice agent to any website so visitors can talk to it.
|
||||
tag: "NEW"
|
||||
---
|
||||
|
||||
### How to add it
|
||||
|
||||
Add your voice agent to any website using the Deploy Agent dialog in your agent's settings.
|
||||
Add your voice agent to any website using the Configure Widget dialog in your agent's settings.
|
||||
|
||||
Step 1: Open the agent settings by clicking the gear icon in the top-right of the agent editor.
|
||||
|
||||
|
||||
|
||||
Step 2: Scroll to the **Deployment** section and click **Configure Embed**.
|
||||
Step 2: Scroll to the **Add to Website** section and click **Configure Widget**.
|
||||
|
||||
|
||||
|
||||
|
||||
Step 3: Enable embedding, add your website's domain to **Allowed Domains**, choose **Floating Widget**, **Inline Component**, or **Headless (Bring Your Own UI)**, customize the button (position, color, text) if applicable, and click **Save Configurations**.
|
||||
|
||||
4
ui/package-lock.json
generated
4
ui/package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "ui",
|
||||
"version": "1.26.0",
|
||||
"version": "1.27.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "ui",
|
||||
"version": "1.26.0",
|
||||
"version": "1.27.0",
|
||||
"dependencies": {
|
||||
"@dagrejs/dagre": "^1.1.4",
|
||||
"@nangohq/frontend": "^0.69.47",
|
||||
|
|
|
|||
|
|
@ -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 "{workflowName}" on any website with a simple script tag
|
||||
Add "{workflowName}" 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>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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> = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue