Skip to main content

Deploy as Chatbot

Quick Steps (TL;DR)

1. Enable Chatbot deployment in Settings → Deployments
2. Configure domain, styling, and intro message in Configuration
3. Copy-paste the generated script into your site to go live instantly

When to Use Chatbot Deployment in SmythOS?​

A SmythOS chatbot is simply your existing agent wrapped in a web UI. Once live, use it to:

  • Answer questions using your Studio workflows
  • Receive files when Allow Attachments is enabled
  • Match your brand with custom colors, icon, and intro message

Step 1: Configure Your Domain​

You can test the chatbot on a default subdomain or verify a custom one for production.

OptionWhen to useSteps
Default subdomainYou just want to test quicklyNothing to do; SmythOS assigns one automatically
Custom subdomainYou need a branded or production URLGo to Subdomains, add the host, then click Verify to complete DNS validation
Staging vs Production

Use the provided .stage.smyth.ai subdomain for testing and .pstage.smyth.ai for production. Both are free and instant.

Step 2: Enable the Chatbot Deployment​

This makes the chatbot available for public use. Once toggled on, the UI settings become configurable.

  1. Open your Agent → Settings → Deployments
  2. Toggle Chatbot ON
  3. Click Configuration to open the settings modal

Step 3: Customize the Chatbot Configuration​

This is where you define how your chatbot looks and behaves, including messages, brand styling, file uploads, and access control.

Chatbot configuration settings UI in SmythOS

Customize chatbot behavior, intro message, personality, and more

FieldDescriptionTip
NameInternal label for this chatbot deploymentHelps you identify multiple bots
Intro MessageFirst line visitors see when chat opensKeep it friendly and concise
PersonalitySystem prompt that guides tone and style; specify tone, behavior, or any contextual instructions.e.g., "You are a witty but helpful AI"
Allowed DomainsComma‑separated list where the bot is allowed to run to limit deployment to authorized websites.Leave blank for no restriction
IconURL for the launcher avatar (PNG/SVG)Square images render best
Code Syntax Highlight ThemeTheme for code blocks (e.g., oneDark, dracula)Preview updates live in the right‑hand pane
Message ViewEmbed chat inside a page element instead of floating bubbleCheck the box to enable embed mode
Allow File AttachmentsLet users upload files during chatIdeal for PDF or CSV analysis workflows

Step 4: Customize Look and Feel of Chatbot​

CustomiseHow
Colors & fontsUse the color‑picker in the config modal
Bubble CSSPass humanBubbleClass / botBubbleClass in ChatBot.init()
IconPaste an image URL (PNG / SVG)

JavaScript Example​

ChatBot.init({
  name: 'My Agent 101',
  introMessage: 'Happy to see you, how can I be of assistance today?',
  // humanBubbleClass: 'human-chatbox-bubble',
  // botBubbleClass: 'bot-chatbox-bubble',
  domain: 'your-agent.agent.pstage.smyth.ai',
  isChatOnly: false, // false = floating bubble, true = inline embed
  allowAttachments: true
});

Custom CSS (Optional)​

You can override bubble styles using your custom classes.

.human-chatbox-bubble {
  font-size: 24px !important;
}

.bot-chatbox-bubble {
  font-size: 30px !important;
}

/* Override elements inside bot bubbles */
.bot-chatbox-bubble h1 {
  color: #000000;
}

Step 5: Embed the Chatbot​

SmythOS supports two deployment modes. Pick one based on how you want the chatbot to appear on your site.

Inline Chat Default​

Inline mode renders the chatbot inside a specific container. Use this when embedding inside a sidebar, help desk page, or layout grid.

<div id="smythos-chatbot-container"></div>
<!-- Place this div wherever you want the chat window to appear -->

Then add the script at the end of your page:

<script src="https://your-agent.agent.pstage.smyth.ai/static/embodiment/chatBot/chatbot-v2.js"></script>
<script>
  // Same init call for both modes; only the value of `isChatOnly` changes.
  ChatBot.init({
    domain: 'your-agent.agent.pstage.smyth.ai',
     isChatOnly: false, // false = floating bubble, true = inline embed
    // attachments are not allowed by default; they can be enabled by checking the box in the configurations to allow them
    allowAttachments: false,
    // ... additional settings go here ...
    // if you set your intro message, then it would go here as shown in line below:
    introMessage: 'This is the intro message for your chatbot',
    // ... color settings here...
  });
</script>
Why inline?

Inline mode gives you full CSS control over width, height, and placement.

Floating Bubble Popup​

Adds a launcher in the bottom‑right corner, similar to a live‑chat widget.

<script src="https://your-agent.agent.pstage.smyth.ai/static/embodiment/chatBot/chatbot-v2.js"></script>
<script>
  ChatBot.init({
    domain: 'your-agent.agent.pstage.smyth.ai',
    isChatOnly: false, // false = floating bubble, true = inline embed
    // attachments are not allowed by default; they can be enabled by checking the box in the configurations to allow them
    allowAttachments: false,
    // ... additional settings go here ...
    // if you set your intro message, then it would go here as shown in line below:
    introMessage: 'This is the intro message for your chatbot',
    // ... color settings here...
  });
</script>
Use one mode per page

Inline and floating modes are mutually exclusive.

Step 6: Deploy and Test​

  1. Make sure you’ve deployed at least one version of your Agent
  2. Load the page where the script is embedded
  3. Send a test message and confirm the Agent responds correctly
Success

Your SmythOS chatbot is live!

What's Next?​

Troubleshooting
SymptomFix
Nothing shows on siteEnsure ChatBot.init() is called after the DOM loads
404 on scriptDouble-check your agent domain and subdomain
Unauthorized errorMake sure your site is listed under Allowed Domains
Agent not respondingConfirm the agent has a deployed version and live workflows
File upload not workingEnable Allow File Attachments in chatbot configuration