Embedding Widgets — Add Answe to Your Website

Introduction

Answe widgets can be embedded on any website with a simple script tag. Choose from 5 widget types to match your page layout and user experience goals. Widgets work on WordPress, Shopify, Squarespace, Wix, and any custom HTML site.

How It Works

Step 1: Add the Widget Loader

Add this script tag to your page (ideally before the closing </body> tag):

<script async src="https://www.answe.com/assets/js/qstio_widget_loader.js"></script>

This lightweight loader fetches the widget code only when needed.

Step 2: Add Widget Elements

Place widget <div> elements wherever you want widgets to appear:

<div class="qstio-widget"
     data-widget-type="embed"
     data-username="your-username"
     data-qstio-id="your-question-id">
</div>

Step 3: Initialize

Add the initialization script:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    initQstioWidgets();
  });
</script>

Widget Types

1. Full/Embed Widget

<div class="qstio-widget expand-height" data-widget-type="embed">

The complete widget experience. Shows the full question, options, and conversation in a self-contained container. Best for dedicated landing pages or sections where the widget is the main content.

Best for: Landing pages, dedicated booking pages, full shopping experiences.

2. Option Widget

<div class="qstio-widget" data-widget-type="option">

Shows answer options inline on your page. When a visitor clicks an option, the conversation continues in a side panel. Compact and non-intrusive.

Best for: Sidebars, product pages, FAQ sections.

3. Horizontal Option Widget

<div class="qstio-widget qstio-widget-horizontal" data-widget-type="option">

Like the option widget but with a horizontal layout. Options appear side by side instead of stacked. Responsive — wraps on smaller screens.

Best for: Headers, hero sections, wide content areas.

4. Inline Widget

<div class="qstio-widget" data-widget-type="inline">

Minimal button that opens a full-screen form when clicked. Takes up very little space on your page.

Best for: Minimal footprint, call-to-action buttons, floating triggers.

5. Chat Widget

<div class="qstio-widget" data-widget-type="chat">

Chat-only interface for real-time messaging. No forms or options — just a conversation window.

Best for: Customer support, live chat, Q&A.

Customization

Widget Attributes

Attribute	Description
data-widget-type	Widget type: embed, option, inline, chat
data-username	Your Answe username
data-qstio-id	The question ID to display

Styling

Widgets use the .qstio-* CSS namespace and won't conflict with your site's styles. The widget inherits nothing from your page — it's completely self-contained.

To customize colors and appearance, use the widget editor in your Answe dashboard.

Key Benefits

• Zero dependencies — No jQuery, React, or other libraries needed
• Lightweight — Small script loaded asynchronously
• Isolated — Widget CSS won't affect your site, and your site CSS won't affect the widget
• Responsive — Works on mobile, tablet, and desktop
• Multiple widgets — Place as many widgets as you want on a single page

Getting Started

1. Choose the widget type that fits your layout
2. Copy the embed code from your question's settings
3. Paste into your website HTML
4. Preview and adjust

Related

• Quick Start Guide — Full setup walkthrough
• Widgets — Detailed widget customization
• Creating Your First Question — Build widget content