Installation and connection guide

Connect NileFlow to your customer channels.

Install your AI assistant on a website, approve the domains where it can appear and prepare WhatsApp for customer conversations.

One-time installation

Add the script once and manage the assistant in NileFlow.

No customer API keys exposed

Settings controlled from NileFlow

Works across multiple website platforms

Step 1

Prepare your NileFlow workspace

Complete the assistant configuration before adding it to a public website. This prevents visitors from seeing an unfinished assistant.

A completed NileFlow workspace

Approved business knowledge added to your assistant

A Website Widget connection created in the dashboard

Your website domain added to Allowed Origins

Your unique NileFlow widget installation script

Add every approved domain

If your website works with both https://example.com and https://www.example.com, add both addresses to Allowed Origins.

Plain HTML

Install NileFlow using one script

For a standard HTML website, paste your installation script before the closing body tag on every page where the assistant should appear.

Website installation script

Replace your key

<script
  src="https://nileflow-five.vercel.app/widget/nileflow.js"
  data-widget-key="YOUR_WIDGET_KEY"
  async
></script>

Where to place it

    <main>
      Your website content
    </main>

    <script
  src="https://nileflow-five.vercel.app/widget/nileflow.js"
  data-widget-key="YOUR_WIDGET_KEY"
  async
></script>
  </body>
</html>

Next.js and React

Load NileFlow from the application layout

Add the external script once inside the root layout so the assistant is available across the entire website.

Next.js root layout

Replace your key

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}

        <Script
          src="https://nileflow-five.vercel.app/widget/nileflow.js"
          data-widget-key="YOUR_WIDGET_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Direct script alternative

Some hosting systems may transform framework-managed scripts. In that case, use a normal lowercase script element inside the root layout.

<script
  src="https://nileflow-five.vercel.app/widget/nileflow.js"
  data-widget-key="YOUR_WIDGET_KEY"
  async
></script>

WordPress

Install NileFlow without editing the theme permanently

The safest method is to use a header and footer code plugin so the script remains installed when the WordPress theme is updated.

Recommended method

1. Install a trusted header and footer code plugin.
2. Open the plugin's footer scripts section.
3. Paste the NileFlow installation script.
4. Apply it across the entire website.
5. Save and clear the WordPress cache.

Theme file method

1. Open Appearance and the theme file editor.
2. Find the active theme footer file.
3. Paste the script before the closing body tag.
4. Save the file and clear all caches.
5. Recheck the installation after changing themes.

WordPress footer script

Replace your key

<script
  src="https://nileflow-five.vercel.app/widget/nileflow.js"
  data-widget-key="YOUR_WIDGET_KEY"
  async
></script>

Website builders

Use the global custom-code area

Most website builders provide a global script, footer code or HTML embed feature. Install NileFlow once in the area that loads across all pages.

Shopify

Open your active theme code and place the NileFlow script before the closing body tag in theme.liquid.

Wix

Use Custom Code in your Wix dashboard, paste the script, apply it to all pages and load it in the body.

Webflow

Open Project Settings, go to Custom Code and paste the script inside the footer code section.

Hostinger Website Builder

Use the custom code or embed element and make sure the installation script is included on every page.

React applications

Add the external script once in the application root, main HTML template or shared layout.

Other website builders

Look for Custom Code, Footer Code, Tracking Code, HTML Embed or Global Scripts in the platform settings.

Prepare your official customer messaging connection

WhatsApp connections use Meta's official business tools. Complete the business verification and number setup before enabling automated customer conversations.

WhatsApp connection checklist

Create or access a Meta Business Portfolio

Create a WhatsApp-enabled Meta application

Add or verify the business phone number

Configure the NileFlow webhook URL

Add the verification token securely

Generate a permanent production access token

Test inbound and outbound messages

Confirm connection health in NileFlow

Never paste permanent access tokens into website code or public documents. WhatsApp secrets should only be saved inside secure NileFlow environment settings.

Troubleshooting

Common installation problems

Most widget problems are caused by domain permissions, cached website files or the script being added to only one page.

The chat launcher does not appear

Confirm that the widget is enabled, the correct script was installed and the current website domain is included in Allowed Origins.

It works locally but not on the live website

Add the production domain to Allowed Origins. A local address such as localhost is different from the live domain.

The website was updated but the old widget still appears

Clear the website host, CDN and browser cache. On Hostinger, wait for the deployment to become Current and then purge the website cache.

The widget appears on one domain but not another

Add every approved variation separately, including both the bare domain and www version when your website uses both.

Messages cannot be sent

Check the Website Widget connection status, confirm that the assistant has business knowledge and review the connection health in NileFlow.

The mobile keyboard covers the message box

Make sure the site is loading the newest NileFlow script. Clear cached HTML and JavaScript after deployment changes.

Security

Understand what can safely appear in website code

The widget installation key identifies a public assistant connection. Private provider tokens and database credentials must never be included in the installation script.

Safe to publish

• NileFlow widget script URL
• Public widget installation key
• Approved public website origins
• Public greeting and branding settings

Never publish

• OpenAI or Gemini API keys
• Supabase service-role credentials
• WhatsApp permanent access tokens
• Webhook signing secrets

Ready to connect your first channel?

Create a workspace, add your approved business information and configure the website assistant from the NileFlow dashboard.

Create workspace