D
DeskClone Docs

Embed Widget

The embed widget is how your website visitors interact with Jarvis. It appears as a chat bubble in the corner of your site. When a visitor clicks it, a conversation window opens and they can ask questions, get answers from your knowledge base, and get support - all without leaving your page.

This is the core product action. Once the widget is live, Jarvis is working for you around the clock.

Getting Your Embed Code

1

Go to Settings

Navigate to Settings in the sidebar.

2

Open the Publish Agent tab

Click the Publish Agent tab. This is where you manage your widget and form configuration.

3

Configure your chat widget

Set your agent name, welcome message, and brand colors. The primary color controls the widget header and send button. Choose a color that matches your website.

4

Publish the chat widget

Click Publish Chat Widget. This generates your unique API key and makes Jarvis available for your website. You only need to do this once.

5

Save your changes

After publishing, click Save Changes to persist your name, colors, and welcome message. Publishing and saving are separate actions - make sure to do both.

After clicking Publish Chat Widget, also click Save Changes to save your branding choices. These are two separate actions. If you only publish without saving, your color and message customizations may not be preserved.

Adding to Your Website

There are three ways to add Jarvis to your website:

Copy the script tag from the Publish Agent tab and paste it into your website's HTML, just before the closing </body> tag:

<script
  src="https://jarvis.deskclone.ai/embed/chat.js"
  data-key="your-api-key-here"
  data-theme="light"
  data-welcome="Hi! How can I help you today?"
></script>

This is the recommended method. It loads the widget asynchronously and does not affect your page load speed.

If you want to share Jarvis as a standalone page (not embedded on your site), use the share link:

https://jarvis.deskclone.ai/chat/your-url-slug

This opens a full-page chat experience. Useful for sharing with your team during testing, or as a link in emails and social media.

iFrame

For more control over placement, you can embed Jarvis in an iFrame:

<iframe
  src="https://jarvis.deskclone.ai/chat/your-url-slug"
  width="400"
  height="600"
  style="border: none;"
></iframe>

This is useful if you want to embed the full chat experience inside a specific section of your page rather than as a floating bubble.

Customizing the Widget

From the Publish Agent tab in Settings, you can customize:

  • Agent Name - shown in the widget header
  • URL Slug - the unique identifier for your share link (automatically cleaned up from your input)
  • Welcome Message - the first thing visitors see when they open the chat
  • Primary Color - header background and send button
  • Gradient Color - subtle accents and gradients

Changes to the welcome message, colors, and name take effect immediately after saving - you do not need to update the script tag on your website.

Support Form

In addition to the chat widget, you can also publish a Support Form - a structured form that visitors can fill out to submit a request. The form is configured from the same Publish Agent tab, in its own section below the chat widget settings. It supports the same branding options (name, colors) and generates its own embed code.

Deployment Readiness

Before going live, make sure you have:

  • [ ] Written a personality description for Jarvis (in Your Agent > Personality)
  • [ ] Added content to your knowledge base (at least a few articles covering your most common questions)
  • [ ] Tested the widget using the Test tab or the share link
  • [ ] Set your brand colors and welcome message
  • [ ] Published your chat widget and saved your changes

You do not need a perfect knowledge base to go live. Start with your top 10-20 most common questions and add more over time. Jarvis will honestly say "I don't know" for questions outside your content - which is better than making something up.

Testing Before Going Live

Before adding the widget to your production website, test it:

  1. Use the share link - open it in a browser and have a conversation. Check that the tone, accuracy, and branding look right.
  2. Test on a staging site - if you have a staging or development version of your website, add the script tag there first.
  3. Try edge cases - ask questions Jarvis cannot answer. Verify it responds gracefully instead of guessing.

Troubleshooting

Widget not appearing

  • Check the API key - make sure the data-key attribute in your script tag matches the key shown in Settings > Publish Agent
  • Check script placement - the script tag should be placed before </body>, not in the <head>
  • Check your browser console - open developer tools (F12) and look for any error messages

CORS errors

If you see CORS errors in your browser console, your domain may not be in the allowed origins list. Go to Your Agent > Widget tab and add your domain to the Allowed domains setting.

Widget loads but conversations fail

  • Verify that your agent is published (the Publish Chat Widget button should show as already published)
  • Check that your agent has remaining conversations for the month
  • Try the share link directly - if that works, the issue is with your website's script tag placement

What's Next

Your widget is live - visitors can now chat with Jarvis on your website. To set up automatic issue creation from your support email, head to Email Monitoring.

Previous

Smart Import

Next

Email Monitoring

Was this page helpful?