Documentation that matches the product.

Overview

Guidly adds a launcher + assistant to your web app. Visitors ask questions in natural language; Guidly responds with concise answers and, when tutorial mode is available, can highlight real DOM nodes and walk users through flows step by step.

Your team controls branding, greeting, FAQ chips, and plain-text knowledge from the dashboard after signing in. The widget fetches public settings and streams chat to Guidly's API using your embed key.

Quickstart

1. Create an account and open Marketing widget (or your tenant embed settings) to copy your embed key.
2. Add the script tag below to your app layout—ideally once per document, before </body>.
3. Deploy, load a page, and open the launcher. Ask a question your knowledge base covers.
4. Fine-tune colors, copy, FAQ, and knowledge in the dashboard—changes apply on the next widget settings fetch.

Installation

Production snippet

Load the widget from our CDN. Replace YOUR_EMBED_KEY with the key from your Guidly workspace. The script bootstraps automatically when the document is ready.

<script
  async
  src="https://cdn.guidly.app/widget.js"
  data-guidly-key="YOUR_EMBED_KEY"
  data-api-url="https://api.guidly.app"
></script>

Self-hosted script

You may host widget.js on your own CDN or serve it from your app (for example under /public in Next.js). Keep data-api-url pointed at the Guidly API host unless your deployment uses a custom gateway.

<!-- Same-origin script (e.g. copied to your CDN) -->
<script
  async
  src="/guidly-widget.js"
  data-guidly-key="YOUR_EMBED_KEY"
  data-api-url="https://api.guidly.app"
></script>

Data attributes

The script tag supports the following attributes (all optional except your key in production):

Global configuration

Alternatively, set window.GUIDLY_CONFIG before the script executes. Values here override defaults and merge with dashboard-backed settings where appropriate.

window.GUIDLY_CONFIG = {
  apiKey: "YOUR_EMBED_KEY",
  apiUrl: "https://api.guidly.app",
  primaryColor: "#030712",
  guideAccentColor: "#030712",
  widgetTitle: "How can we help?",
  position: "bottom-right",
};

Configuration

Most teams configure Guidly entirely from the dashboard—no redeploy required for copy and knowledge updates. Open Dashboard → Marketing widget → Customize to edit:

• Colors & placement — Brand color, guide accent, and launcher corner. Users can drag the launcher; their preference is remembered locally when supported.
• Chat copy — Panel title, greeting, and the first impression visitors see when the assistant opens.
• Preset Q&A — FAQ chips the model should treat as authoritative for pricing, policies, and common paths.
• Knowledge base — Plain-text context (product facts, billing rules, tone). Keep it current; it directly shapes answers.

Integrations (e.g. connecting other tools) live under Marketing widget → Integrations when enabled for your workspace.

Dashboard

After signing in, you land in the Guidly dashboard. From there you can manage clients, rotate API keys, review usage, and open the marketing widget experience that powers your public site embed.

Treat embed keys like passwords: scope them per environment (staging vs production) when you have multiple workspaces, and rotate if a key ever leaks.

Widget behavior

Network

On first load the widget requests public widget settings (colors, FAQ, knowledge, titles). Chat messages are sent to Guidly's chat API with page context so answers can reference the DOM structure responsibly.

Tutorial flows

When tutorial mode is enabled and the model returns a structured flow, Guidly can highlight elements via selectors, show a step counter, and listen for the appropriate user action before advancing. If a selector cannot be resolved, the widget logs a warning and attempts to recover gracefully.

Accessibility

The launcher exposes an accessible name; the chat panel uses standard inputs and buttons. Respect user motion preferences—Guidly reduces decorative motion when prefers-reduced-motion is set.

Troubleshooting

Resources

• Changelog — granular product updates.
• Security — how we approach trust and reviews.
• Privacy — data handling at a glance.
• Contact — sales, support, and partnerships.

Need something that is not documented here yet (SSO, VPC deploy, custom data retention)? Message the team—we route technical questions quickly.