Customize the widget

Change the widget's appearance in the dashboard: open your site, click Edit site and change Widget title, Input placeholder, Welcome message, Accent color, Position or Theme. Click Save changes. Then copy the snippet again and replace the old one on your site. Appearance settings live in the snippet, so your site keeps the old look until you re-paste it.

Options

Each setting is a data- attribute on the script tag. You can also edit them by hand.

• data-title: the heading at the top of the chat panel. Default: Ask AI.
• data-placeholder: the hint text in the message box. Default: Ask a question about these docs…
• data-welcome: the first message visitors see. Default: Hi! Ask me anything about this documentation.
• data-color: the accent colour, as a hex value like #4f46e5. Default: #f6821f (orange).
• data-position: right (default) or left.
• data-theme: auto (default) follows the visitor's light or dark system setting. light and dark force one.

The defaults are written for documentation sites. If yours is a shop or a business site, change the placeholder and welcome message to match.

<script
  src="https://app.talktomysites.com/widget.js"
  data-site-id="YOUR_SITE_ID"
  data-title="Ask Acme"
  data-placeholder="Ask about plans, shipping or returns…"
  data-welcome="Hi! Ask me anything about Acme."
  data-color="#4f46e5"
  data-position="right"
  data-theme="auto"
  defer
></script>

Keyboard

Enter sends a message. Shift+Enter adds a new line. Esc closes the panel while you're typing in it.

Control it from JavaScript

The widget adds window.TalkToMySites once it loads:

TalkToMySites.open()   // open the chat panel
TalkToMySites.close()  // close it
TalkToMySites.ask("Do you ship to Canada?")  // open and ask a question

Use ask to add your own "Ask a question" buttons, or to suggest questions on a help page:

<button type="button" onclick="TalkToMySites.ask('How do I reset my password?')">
  How do I reset my password?
</button>