Skip to main content

​
Chat Widget

Add an AI-powered chat widget to your website so visitors can get instant answers, book appointments, and connect with your business 24/7.

​
Setting Up the Widget

1

Go to Chat Widget settings

Navigate to Dashboard → Settings → Chat Widget.
2

Configure appearance

Customize the widget to match your brand:
  • Primary color — button and header color
  • Position — bottom-right or bottom-left
  • Welcome message — what visitors see when they open the chat
  • Agent name — display name shown in the chat header
3

Select an agent

Choose which AI agent handles chat conversations.
4

Copy the embed code

Click Get Code to copy the embed snippet.
5

Add to your website

Paste the code before the closing </body> tag on your website.

​
Embed Code

The embed snippet looks like this: 
<script
  src="https://widget.ringyo.ai/chat.js"
  data-agent-id="YOUR_AGENT_ID"
  data-color="#0D9488"
  data-position="bottom-right"
  async
></script>
The widget loads asynchronously and won’t slow down your page.

​
Customization Options

OptionDescriptionDefault
data-colorPrimary color (hex)#0D9488
data-positionbottom-right or bottom-leftbottom-right
data-welcomeWelcome message text”Hi! How can I help?”
data-nameAgent display nameYour agent’s name
data-avatarAvatar image URLRingyo default
data-hide-brandingHide “Powered by Ringyo” (Pro+)false
On Pro and Agency plans, you can upload a custom avatar and remove Ringyo branding. See Custom Branding.

​
Platform Guides

  1. Go to Appearance → Theme Editor (or use a plugin like “Insert Headers and Footers”)
  2. Paste the embed code before </body> in your theme’s footer
  3. Save changes
For the full embedding guide with advanced options, see Embedding Widget.

​
Next Steps