HolyQA Docs

Website Integration

Learn how to integrate HolyQA into your church website across different platforms.

Quick Start

Before You Start

Make sure you have uploaded and processed content in your HolyQA dashboard. Your embed code will be automatically generated with your unique church settings.

  1. Go to your dashboard's "Website Integration" tab
  2. Choose your integration method (Widget, Iframe Embed, or Full Page link)
  3. Customize appearance and settings with live preview
  4. If using Widget or Iframe: add your website URL to the Allowed Website URLs list for security
  5. Copy the generated embed code
  6. Follow the platform-specific instructions below
  7. Test the integration on your website

📋 Get Your Custom Embed Code

Your dashboard generates optimized embed code with your unique church identifier, plan-appropriate features, and performance optimizations. All customization is handled through the dashboard interface with live preview.

Go to Dashboard →

Integration Options

HolyQA offers three integration methods to fit different website needs:

Recommended

Widget

Floating button that opens a chat interface. Doesn't interfere with your website layout.

  • Customizable position and appearance
  • Trigger options: button, auto-open, hover
  • Mobile responsive

Iframe Embed

Embedded chat interface that becomes part of your page layout.

  • Responsive width (fits your page builder column)
  • Includes sizing presets (Responsive / Tall / Full screen)
  • Good for dedicated Q&A pages

Full Page

Complete page dedicated to the Q&A interface.

  • Full browser window
  • Can be linked directly
  • Best for mobile users
White-Label Custom Domains →

Integration Method Comparison

Compare features across different integration options

FeatureWidgetIframeFull Page
Customizable Position
Choose where the interface appears on your page
Mobile Responsive
Automatically adapts to mobile screens
Doesn't Affect Layout
Won't interfere with your existing website design
Fixed Dimensions
Consistent size that fits into page content
Trigger Options
Button, auto-open, or hover activation
Direct Linking
Can be linked to directly from other pages

WordPress Integration

Recommended: Widget Integration

For WordPress sites, the widget integration works best as it doesn't interfere with your theme layout and provides the best user experience across all devices.

Widget: Method 1 — Plugin-Based Integration (Recommended)

  1. Install a header/footer plugin like "Insert Headers and Footers" or "WPCode"
  2. Copy your widget script code from the dashboard
  3. In the plugin settings, paste the code in the Footer Scripts section
  4. Save the settings
  5. The widget will appear on all pages

Widget: Method 2 — Theme Editor Integration

  1. Copy your widget script code from the dashboard
  2. In WordPress admin, go to Appearance → Theme Editor
  3. Select footer.php from the file list (or use a child theme)
  4. Scroll to the bottom and find the closing </body> tag
  5. Paste your widget script code just before the </body> tag
  6. Click Update File
  7. Visit your website to see the widget appear

Iframe: Method 3 — Page/Post Embed (Custom HTML block)

  1. Copy your iframe embed code from the dashboard
  2. Edit the page or post where you want HolyQA to appear
  3. Switch to "Text" or "Code" editor mode (not Visual)
  4. Paste your iframe code where you want the Q&A interface
  5. Click Update or Publish
  6. Preview the page to see the embedded interface

Iframe: Method 4 — Widget Area (Sidebar/Footer)

  1. Copy your iframe embed code from the dashboard
  2. Go to Appearance → Widgets in WordPress admin
  3. Find the widget area where you want HolyQA (sidebar, footer, etc.)
  4. Add a "Custom HTML" widget to that area
  5. Paste your iframe code in the widget content
  6. Add a title if desired (e.g., "Ask Questions")
  7. Click Save

Squarespace Integration

Recommended: Site-Wide Widget

For Squarespace sites, adding the widget script to Code Injection provides the best experience as it appears on all pages without affecting your design.

Widget: Site-Wide (Recommended)

  1. Copy your widget script code from the dashboard
  2. In Squarespace, go to Settings → Advanced → Code Injection
  3. Paste your widget script code in the "Footer" section
  4. Click Save
  5. Visit your website to see the widget appear on all pages

Iframe: Page-Specific Embed (Recommended)

  1. Copy your iframe embed code from the dashboard
  2. Edit the page where you want HolyQA to appear
  3. Click the "+" button to add a new content block
  4. Select "Code" from the block options
  5. Paste your iframe embed code in the code block
  6. Click outside the code block to apply
  7. Click Save and then Publish the page

Integration Code Examples

📋 Your Dashboard Generates This Code

The examples below show what your generated code will look like. Your actual code from the dashboard will include your unique church identifier and selected customizations.

Widget Script Example:
<script async defer src="https://holyqa.com/widget.js" data-church-slug="your-church-slug"> </script>
Iframe Embed Example:
<iframe src="https://holyqa.com/embed/church/your-church-slug" style="width: 100%; height: 650px; border: 0;" frameborder="0" title="HolyQA Q&A" loading="lazy"> </iframe>

Tip: In the dashboard, use the Layout preset toggle to generate Responsive (fixed height), Tall (80vh), or Full screen (100vh) iframe code.

Full Page URL Example:
https://holyqa.com/embed/church/your-church-slug/fullpage

Dashboard Customization

The Website Integration tab in your dashboard provides extensive customization options with live preview.

Note: All customization features are available on every tier. White-label features (removable branding, custom domain) require Scale tier or the White-Label add-on.

Visual Customization

  • Theme selection (light/dark)
  • Size options (compact/medium/large)
  • Custom colors and gradients
  • Font family and weight
  • Border radius and styling
  • Logo upload and positioning
  • Removable "Powered by HolyQA" branding (Scale or White-Label add-on)

Functional Settings

  • Widget position (6 options)
  • Trigger behavior (button/auto/hover)
  • Custom welcome messages
  • Custom AI instructions
  • Character limits
  • Citation display (Basic/Advanced)
  • Allowed website URLs (security)

Other Website Platforms

Wix

  1. Copy your iframe embed code from the dashboard
  2. In Wix Editor, click Add → More → HTML iframe
  3. Click Enter Code
  4. Paste your iframe embed code
  5. Click Update and position as needed

Webflow

  1. Copy your widget script from the dashboard
  2. Go to Project Settings → Custom Code
  3. Paste widget script in Footer Code
  4. Publish your site
  5. For iframe embeds: Use an Embed element and paste the iframe code

Shopify

  1. Copy your widget script from the dashboard
  2. Go to Online Store → Themes → Actions → Edit Code
  3. Open theme.liquid
  4. Paste script before </body>
  5. Save the file

Custom HTML Sites

  1. Copy your widget script from the dashboard
  2. Open your HTML file in a text editor
  3. Paste script before the </body> tag
  4. Save and upload to your web server
  5. For iframe: Place code where you want it to appear

💡 General Integration Tips

  • Widget scripts work best when added to the footer/before closing </body> tag
  • Iframe embeds go inside page content via a Custom HTML / Embed block (use the dashboard presets)
  • Full page links are best used as a menu link or button (standalone assistant page)
  • Always test on both desktop and mobile after integration

Testing Your Integration

Step 1: Dashboard Preview Testing

Always test in the dashboard first before adding to your website

  1. Go to the Website Integration tab in your dashboard
  2. Select your preferred embed type (widget, iframe, or fullpage)
  3. Customize appearance, colors, and behavior settings
  4. Use the live preview to test functionality and appearance
  5. Ask test questions in the preview to verify responses work correctly
  6. Make sure you have uploaded and processed content first
  7. Copy the generated code once you're satisfied with the preview

Step 2: Website Integration Testing

  1. Add the embed code to your website using the platform instructions above
  2. For widgets: Look for the floating button in the position you selected
  3. For iframes: Verify the interface loads and displays correctly in your page
  4. For fullpage: Test the direct link opens the Q&A interface
  5. Click/tap to open the interface and ask a test question about your church
  6. Verify the response includes relevant content from your uploaded sermons
  7. Test on both desktop and mobile devices to ensure responsive behavior

Need Help?

If you're experiencing issues or have questions, we're here to help.

Email Support

Send us a detailed message at hello@holyqa.com

Response within 24 hours

Documentation

Check our troubleshooting guide for common solutions

Immediate answers to common questions

When contacting support, please include your church name and a detailed description of the issue.

Was this page helpful?