GLYDE Chat Widget Loading...

CDN Auto-Inject Widget Test Page - User Scenarios & Display Modes

Most Advanced Voice AI

Handles all candidate journeys - from discovery to application to screening to recruiter chat.

Faster response times (<300ms), no lagging during conversation
Accepts user interruption, responds and returns to topic, for more natural conversation flow (no pre-recorded questions).
Fluid conversation, fully dynamic, not fully scripted, just like humans
Handles redirects — this job not working for you? Here's some others instead
Automatically switches between contexts, storing history where relevant.
- Job Search (discovery)
- Job Apply (with New Candidate registration)
- Screening
Recognizes existing candidates and candidates cut off during conversation, to resume flow naturally.
Users can toggle between Voice and Text mode
Various styling/positioning options
- Chat button bottom right (traditional)
- Popup Modal Dialog
- Inline in paragraph
Handles interruptions and continues conversations naturally with lightning fast responses and context aware.
When resuming conversations, both Voice and Text modes provide personalized greetings that acknowledge previous interactions, and recall past conversations for a more natural experience.
Returning visitors are verified via One Time Password (OTP) and have a personalized greeting and the AI will pick up from the last general conversation.

1. Select User Scenario

Choose who you want to simulate. This determines the contextId and contextType sent to the API.

Known Applicant

Existing candidate with an active job application. Has conversation history.

contextType: screening
contextId: application_uuid

Known Candidate (Discovery)

Returning candidate exploring opportunities. No specific job application yet.

contextType: candidate_discover
contextId: candidate_uuid

Job Page Visitor

Unknown visitor on a specific job posting page. May become a candidate.

contextType: job_apply
contextId: job_uuid

Unknown Visitor

First-time visitor exploring career opportunities. Discovery mode.

contextType: discovery
contextId: client_uuid

Current Config: Known Applicant | contextType: screening | contextId: (application_uuid)

Send full chat history (screening only). When unchecked, cdn-test sends only the last 5 messages (limit_to_last: 5, skip_continuity_limit: false). Check to send full history. Or add ?skip_continuity_limit=true to the URL.

2. Try Different Display Modes

Inline Widget Demo

Defaults to Voice mode with "Prefer to type?" option

Integration Examples & Documentation

Integration Examples

Floating (Default):

        <script
  src="https://unpkg.com/@glydeunity/voice-sdk@latest/dist/glyde-chat.umd.js"
  data-publishable-key="YOUR_KEY"
  data-context-id="YOUR_CONTEXT_ID"
  data-context-type="screening"
  data-display-mode="floating"
  data-position="bottom-right"
></script>
      

Modal (Opens Immediately):

        <script
  src="https://unpkg.com/@glydeunity/voice-sdk@latest/dist/glyde-chat.umd.js"
  data-publishable-key="YOUR_KEY"
  data-context-id="YOUR_CONTEXT_ID"
  data-context-type="job_apply"
  data-display-mode="modal"
  data-width="500"
  data-height="600"
  data-default-mode="text"
></script>
      

Inline (Embedded):

        <script
  src="https://unpkg.com/@glydeunity/voice-sdk@latest/dist/glyde-chat.umd.js"
  data-publishable-key="YOUR_KEY"
  data-context-id="YOUR_CONTEXT_ID"
  data-context-type="discovery"
  data-display-mode="inline"
  data-width="100%"
  data-height="500"
  data-show-header="true"
  data-auto-init="false"
></script>

<div id="chat-container"></div>

<script>
  GlydeChat.render('#chat-container', {
    publishableKey: 'YOUR_KEY',
    contextId: 'YOUR_CONTEXT_ID',
    contextType: 'discovery',
    displayMode: 'inline',
    dimensions: { width: '100%', height: 500 }
  });
</script>
      

Mobile (full viewport, safe areas, auto-start):

        <script
  src="https://unpkg.com/@glydeunity/voice-sdk@latest/dist/glyde-chat.umd.js"
  data-publishable-key="YOUR_KEY"
  data-context-id="YOUR_CONTEXT_ID"
  data-context-type="screening"
  data-display-mode="mobile"
></script>
      

Context Types

Context Type	contextId	Use Case
`screening`	application_uuid	Known applicant with active application
`candidate_discover`	candidate_uuid	Returning candidate exploring jobs
`job_apply`	job_uuid	Visitor on a specific job page
`discovery`	client_uuid	Unknown visitor exploring opportunities

All Display Mode Options

Attribute	Options	Description
`data-display-mode`	floating, modal, inline, mobile	How the widget appears
`data-context-type`	screening, candidate_discover, job_apply, discovery	Type of conversation context
`data-width`	number or CSS value	Widget width (e.g., 500, "100%")
`data-height`	number or CSS value	Widget height (e.g., 600, "80vh")
`data-show-header`	true, false	Show/hide the header bar
`data-allow-close`	true, false	Show/hide the close button