Documentation

Developer Documentation

Everything you need to integrate QueryWing into your website. From quick start guides to advanced customization options.

Quick Start

Get your chatbot running in under 5 minutes

1

Create your bot

Go to Dashboard → Bots → Create New Bot. Configure your bot name and personality.

2

Get your Bot ID

Copy your unique Bot ID from the bot settings page.

3

Add the widget code

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

4

Customize & publish

Adjust colors, messages, and behavior to match your brand.

index.html
<script async src="https://www.querywing.com/widget-ultra.js"
  data-api-url="https://www.querywing.com"
  data-bot-id="YOUR_BOT_ID"
  data-bot-name="Your Bot Name"
  data-company-name="Your Company"
  data-primary-color="#6366f1"
  data-position="bottom-right">
</script>

Configuration Options

All available data attributes for customization

AttributeRequiredDescription
data-bot-id
Required
Your unique bot identifier from the dashboard
data-bot-name
Required
Display name shown in the chat header
data-company-name
Optional
Your company name for branding
data-primary-color
Optional
Primary color for the widget (hex format)
data-position
Optional
Widget position: bottom-right or bottom-left
data-welcome-message
Optional
Initial greeting message
data-avatar-url
Optional
Custom avatar image URL
data-show-branding
Optional
Show/hide QueryWing branding

Advanced Customization

Full example with all customization options

Advanced Example
<script async src="https://www.querywing.com/widget-ultra.js"
  data-api-url="https://www.querywing.com"
  data-bot-id="YOUR_BOT_ID"
  data-bot-name="Support Assistant"
  data-company-name="Acme Inc"
  data-primary-color="#3B82F6"
  data-position="bottom-right"
  data-welcome-message="Hi there! How can I help you today?"
  data-avatar-url="https://example.com/avatar.png"
  data-show-branding="false">
</script>

Brand Colors

Use any hex color code to match your brand. The widget automatically adjusts text colors for accessibility.

Welcome Message

Customize the initial greeting to match your brand voice. Use a friendly, helpful tone to encourage engagement.

White Label

Remove QueryWing branding with data-show-branding="false". Available on Pro and Enterprise plans.

Need help getting started?

Try our live demo to see the widget in action, or contact support for personalized assistance.