Kodesiq Docs

Website Integration

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

Quick Start

Before You Start

Make sure you have uploaded and processed content in your Kodesiq 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, or fullpage)
  3. Customize appearance and settings with live preview
  4. Add your website URL to the allowed origins 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

Kodesiq 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.

  • Fixed dimensions (360px-500px wide)
  • Integrates into page content
  • 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

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.

Method 1: Plugin-Based Integration (Recommended)

Best for: Users who prefer not to edit theme files directly

  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

Method 2: Theme Editor Integration

Best for: Advanced users comfortable editing theme files

  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

Method 3: Page/Post Iframe Embed

Best for: Dedicated Q&A pages or specific content areas

  1. Copy your iframe embed code from the dashboard
  2. Edit the page or post where you want Kodesiq 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

Method 4: Widget Area (Sidebar/Footer)

Best for: Adding iframe embed to sidebar or footer widget areas

  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 Kodesiq (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.

Site-Wide Widget (Recommended)

Best for: Widget that appears on all pages without affecting your design

  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

Page-Specific Iframe

Best for: Dedicated Q&A pages or specific content areas

  1. Copy your iframe embed code from the dashboard
  2. Edit the page where you want Kodesiq 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:
<!-- Performance optimizations --> <link rel="preload" href="https://kodesiq.com/widget.js" as="script"> <link rel="preconnect" href="https://kodesiq.com"> <!-- Main widget script with your settings --> <script async defer src="https://kodesiq.com/widget.js" data-church-slug="your-unique-slug" data-position="bottom-right" data-theme="light"> </script>
Iframe Embed Example:
<iframe src="https://kodesiq.com/embed/church/your-unique-slug" width="420" height="650" frameborder="0" title="Kodesiq Q&A"> </iframe>
Full Page URL Example:
https://kodesiq.com/embed/church/your-unique-slug/fullpage

Dashboard Customization

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

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

Functional Settings

  • Widget position (6 options)
  • Trigger behavior (button/auto/hover)
  • Custom welcome messages
  • Character limits
  • Citation display options
  • Branding visibility

Other Website Platforms

Wix

  1. Copy your 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: Use Embed element instead

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 can be placed anywhere in your page content
  • Full page links can be used in navigation menus or as standalone pages
  • 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

Troubleshooting Common Issues

🚫 Widget Not Appearing

  • Check that you copied the complete script code from your dashboard
  • Verify the code was pasted before the </body> tag
  • Clear your browser cache and refresh the page
  • Check browser console (F12) for JavaScript errors
  • Ensure your website uses HTTPS (required for widget loading)

💬 No Responses to Questions

  • Ensure you have uploaded and processed content in your dashboard
  • Check that content processing is complete (not still "Processing")
  • Try asking questions about topics you know are in your uploaded content
  • Verify your account is active and within usage limits

🎨 Styling or Display Issues

  • Check for CSS conflicts with your website theme
  • Try different widget positions if the current one is hidden
  • For iframes: Ensure adequate width/height space in your page layout
  • Test on different devices and browsers

🔧 Advanced Troubleshooting

If you're still having issues, use your browser's developer tools:

  1. Press F12 to open developer tools
  2. Go to the Console tab to check for errors
  3. Go to the Network tab to see if scripts are loading
  4. Look for any red error messages and include them when contacting support

Need Help?

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

Email Support

Send us a detailed message at support@kodesiq.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?