Skip to main content

Chat full screen guide

Updated

This lightweight, embeddable full page agent allows you to easily add our AI-powered agent to any website by simply including a <script> and <link> tag in HTML.

The chat screen is fully responsive, easily customizable and optimized for both mobile and desktop environments.

Quick Start

To integrate the agent into the website, paste the following tags into the empty <body> tag of your HTML:


  <link rel="stylesheet" href="https://cdn.thingsolver.com/workforce-hub/chat-screen.min.css" />
  <script
    src="https://cdn.thingsolver.com/workforce-hub/chat-screen.min.js"
    data-wf-screen
    data-agent-id=""
    data-token=""
    data-client-id=""
    data-client-secret=""
    data-tenant-id=""
    data-popup-type=""
    data-language=""
    data-heading=""
    data-subheading=""
    data-title=""
    data-subtitle=""
    data-title-config=''
    data-placeholder=""
    data-color-main=""
    data-color-text=""
    data-border-radius=""
    data-icon-url=""
    data-logo-url=""
    data-home-url=""
  >
</script>

Script Attributes Reference

Attribute Required Description
data-agent-id Yes Unique identifier for your agent.
data-token Yes (if not providing client-id and client-secret) Token for authentication.
data-client-id Yes (if not providing token) Client ID for obtaining the token.
data-client-secret Yes (if not providing token) Client secret key for obtaining the token.
data-tenant-id Yes Identifies your workspace/tenant.
data-language No ISO code like en , fr , etc. Default: auto
data-heading No Optional. Heading message.
data-subheading No Optional. Subheading message.
data-title No Optional. Title to display above the chat input.
data-subtitle No Optional. Subtitle to display below the title.
data-title-config No Optional. JSON for different colored parts of title. Example: [{"text": "Workforce", "color": "#231F20", "space": true}, {"text": "Hub", "color": "#2BA1DC", "space": false}]
data-placeholder No Placeholder text inside the user input field. Default: Ask me anything...
data-color-main No Color for the the user chat bubble, input focus and loading indicator. Default: #231f20
data-color-text No Text color inside the user chat bubble. Default: #ffffff
data-border-radius No Corner radius of the chat bubbles and chat input. Default: 10px
data-icon-url No Optional. Icon to show as agent avatar in chat. Default: Default agent avatar
data-logo-url No Optional. Logo at the bottom right corner (if providing home url)
data-home-url No Optional. Url to go to if the user clicks on the logo.

Note: The attribute data-wf-screen must be included exactly as shown above for proper rendering.

Required CDN Access

To ensure the screen displays the responses correctly, please ensure your site allows outbound requests to the following resources:

  • https://cdn.jsdelivr.net/npm/dompurify@2.3.4/dist/purify.min.js
  • https://cdn.jsdelivr.net/npm/marked/marked.min.js

If you have a Content Security Policy (CSP) or use firewall/network restrictions, please whitelist the full file URLs above.

Example Usage


  <link rel="stylesheet" href="https://cdn.thingsolver.com/workforce-hub/chat-screen.min.css" />
  <script
    src="https://cdn.thingsolver.com/workforce-hub/chat-screen.min.js"
    data-wf-screen
    data-agent-id="solver"
    data-token="token"
    data-client-id="id"
    data-client-secret="key"
    data-tenant-id="tenant-id"
    data-language="en"
    data-heading="How can I help you today?"
    data-subheading=""
    data-title=""
    data-subtitle="here to answer every question"
    data-title-config='[{"text": "Workforce", "color": "#231F20", "space": true}, {"text": "Hub", "color": "#2BA1DC", "space": false}]'
    data-placeholder="Ask me anything..."
    data-color-main="#2BA1DC"
    data-color-text="#ffffff"
    data-border-radius="10px"
    data-icon-url=""
    data-logo-url=""
    data-home-url=""
  >
</script>

Related articles

Comments

0 comments

Please sign in to leave a comment.

Powered by Zendesk