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

Type a word or phrase. Topics that contain it stay listed below, and each match is highlighted in soft gold so you can see it at a glance. Press Esc to clear.

Showing all 7 topics below.

Start here first (2-minute check)

First choose your website type so you do not accidentally install the widget twice.

Plain HTML websites

Copy the newest embed code from your Dashboard.
Paste it before the closing </body> tag.
Save and republish your site.

Next.js / React websites

Do not paste the raw script directly in random components.
Use one dedicated client component (guide in next section).
Mount that component once in your app layout.

Hard refresh after publish (Ctrl+F5 on Windows, Cmd+Shift+R on Mac).
Open your site in private/incognito mode and test again.

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

Beginner guide: convert embed script for Next.js / React

Some sites use the chatbot embed directly in plain HTML. In Next.js and React, it is usually safer to place this logic in a dedicated client component and import it into your layout once.

Quick glossary: 'use client' means the file runs in the browser, useEffect([]) means run once when the component loads, and layout.tsx is the shared wrapper for your pages.

1) Create a widget component file

Create src/components/PrayerChatWidget.tsx (or your own name). Use this format:

'use client'
import { useEffect } from 'react'

export default function PrayerChatWidget() {
  useEffect(() => {
    const embedCode = 'your-embed-code'
    const baseUrl = 'https://your-backend-domain.com'

    const script = document.createElement('script')
    script.src = baseUrl + '/js/chatbot-widget.js'
    script.async = true
    script.onerror = () => {
      const el = document.getElementById('prayer-chat-chatbot-' + embedCode)
      if (el) {
        el.innerHTML =
          '<p style="padding:12px;background:#fff3cd;border:1px solid #ffc107;border-radius:8px;font-family:sans-serif;font-size:14px;">Chat could not load. Check browser console (F12).</p>'
      }
    }
    script.onload = () => {
      if (typeof (window as any).PrayerChat !== 'undefined') {
        ;(window as any).PrayerChat.init({
          embedCode,
          apiUrl: baseUrl + '/api',
        })
      } else {
        const el = document.getElementById('prayer-chat-chatbot-' + embedCode)
        if (el) {
          el.innerHTML =
            '<p style="padding:12px;background:#f8d7da;border:1px solid #f5c6cb;border-radius:8px;font-family:sans-serif;font-size:14px;">Chat failed to start. Open console (F12) for details.</p>'
        }
      }
    }
    document.head.appendChild(script)
  }, [])

  return (
    <div
      id={'prayer-chat-chatbot-' + 'your-embed-code'}
      data-embed-code="your-embed-code"
      suppressHydrationWarning={true}
    />
  )
}

2) Import it in your layout

In Next.js, import the component in src/app/layout.tsx and render it once near the bottom of <body>, for example right before closing </body>.

3) Verify values carefully

- Use the exact embed code from your Prayer Chat dashboard.
- Use your real backend URL for baseUrl (HTTPS).
- Keep only one mounted widget component in your app.

Optional: ask AI to convert it for you

If you are not comfortable coding this by hand, paste your plain embed script into your AI assistant and ask it to convert it into a Next.js/React client component.

Convert this Prayer Chat embed snippet into:
1) a Next.js client component file: src/components/PrayerChatWidget.tsx
2) the import + usage snippet for src/app/layout.tsx

Requirements:
- use useEffect([]) so init runs once
- load script from baseUrl + '/js/chatbot-widget.js'
- call PrayerChat.init({ embedCode, apiUrl: baseUrl + '/api' })
- include script onerror/onload fallback text
- keep the code beginner-friendly and fully copy/paste ready.

Always double-check the generated code, especially your embedCode and backend URL.

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 (common on Tailwind/Vercel themes) can inherit light text into the embed. The widget script now forces readable colors automatically.

What to do

Hard-refresh your site (or bust CDN cache) so the latest /js/chatbot-widget.js loads.
If it still happens, add a scoped override in globals.css for #prayer-chat-chatbot-widget (input + message area only).

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.

7) Next.js / React setup from plain embed code

If you only have a plain HTML embed snippet, convert it into a client component and mount that component once in your app layout.

What to do

Create a dedicated client component (example: src/components/PrayerChatWidget.tsx) and move script loading into useEffect([]).
Set script src to your Prayer Chat backend URL + /js/chatbot-widget.js.
Call PrayerChat.init({ embedCode, apiUrl }) in script.onload.
Render one container div with id/data-embed-code that matches your embed code.
Import that component in your Next.js layout and mount it once near the bottom of <body>.

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.

Keep Your Secrets Safe (General Solution)

Never put your embedCode or apiUrl directly in source code files.

Correct way

Use environment variables:
- NEXT_PUBLIC_PRAYER_EMBED_CODE=your-embed-code-here
- NEXT_PUBLIC_CHAT_BASE_URL=https://chatbot-java-spring-ai.onrender.com
Add them to .env.local (for local development) and in your hosting platform settings (for live site).

Examples

Vercel: Project Settings -> Environment Variables -> Add both keys -> Redeploy
Netlify: Site settings -> Environment variables -> Add both keys -> Trigger deploy
Railway / Render / Cloudflare Pages: Add the variables in the dashboard variables section
GitHub + any host: Set them in hosting dashboard only (GitHub secrets are for Actions only)

This keeps your secrets out of GitHub and safe.

Back to Dashboard Need more help? Contact support