Setup Help

Embed Troubleshooting Guide

If your chatbot is not showing correctly, start here. This guide is beginner-friendly and step-by-step.

Take a breath, take one step at a time, and keep going with faith.

Search this page

Showing 6 of 6 topics.

Start here first (2-minute check)

  1. Copy the newest embed code from your Dashboard.
  2. Paste it before the closing </body> tag.
  3. Save, publish, then hard refresh (Ctrl+F5 on Windows, Cmd+Shift+R on Mac).
  4. Open your site in private/incognito mode and test again.

If it still does not work, use the sections below.

1) New chatbot not appearing

Your old bot appears, but your new bot does not. This usually means your website is still using an old embed code or your app replaced the widget after load.

What to do

  • - Make sure you pasted the latest embed code from Dashboard.
  • - If you use React/Next.js, load the embed in a 'use client' component.
  • - Run embed initialization once in useEffect([]).

2) Chatbot flashes, then disappears

If the chatbot appears for a moment and then disappears, your app is likely re-rendering and removing the widget DOM.

What to do

  • - Keep embed injection in one mount-only useEffect([]).
  • - Do not re-inject on state changes or route changes.

3) Chat input text is light or hard to read

Your website's global CSS is likely overriding widget styles.

What to do

  • - Add a scoped CSS override in globals.css for [id^="prayer-chat-chatbot"].
  • - Reset only widget input styles so your site styles stay untouched.

4) Nothing appears at all

Common reasons: script in wrong place, stale cache, browser extension blocking scripts, HTTPS mismatch, or a strict security policy.

What to do

  • - Put script before </body>.
  • - Clear CDN/site cache and republish.
  • - Disable ad blockers/privacy extensions and test again.
  • - Use HTTPS everywhere (no HTTP assets).
  • - If using CSP/security headers, allow the chatbot script domain.

5) Widget loads twice or behaves strangely

If the embed is added in multiple places, or initialized repeatedly, you may get duplicate widgets or odd behavior.

What to do

  • - Keep only one embed snippet.
  • - Initialize the widget once.

6) Works on desktop, not on mobile

Mobile browsers can cache aggressively, and overlays can hide floating UI.

What to do

  • - Test in private mode on your phone.
  • - Check that small-screen CSS does not hide fixed elements.
  • - Check cookie banners/popups that may cover the widget button.

Quick checklist

  • I copied the newest embed code from Dashboard.
  • I pasted the script before </body>.
  • I only load the widget once (no duplicate script).
  • I scoped CSS so global styles do not break widget input.
  • I tested in private mode with extensions disabled.

When to contact support

If you followed this guide and still have issues, send us:

  • - Your website URL
  • - Your chatbot name
  • - What you expected vs what happened
  • - A screenshot (desktop or mobile)

We will do our best to help quickly and kindly.