Skip to main content

Installing the Widget

The Knock Knock App widget is a small code snippet you paste into your website. Once installed, it places a chat widget on your pages so visitors can start conversations, ask questions, and connect with you or your AI agent.

What the Widget Script Does​

The widget script loads a lightweight chat interface on your website. It does not slow down your pages or interfere with your existing content. When a visitor clicks the widget, they can send messages, request calls, and interact with your AI agent — all without leaving your site.

Where to Paste the Code​

Place the widget code snippet just before the closing </body> tag on every page where you want the widget to appear. In most cases, this means adding it to your site's main template or layout file so it loads on all pages automatically.

tip

You can find your widget code at any time inside the Knock Knock App dashboard. Go to your widget settings and copy the embed snippet from there.

Platform Guides​

WordPress​

  1. In your WordPress admin panel, go to Appearance > Theme Editor (or Theme File Editor).
  2. Open your theme's footer.php file.
  3. Paste the widget code just before the </body> tag.
  4. Click Update File.

Alternatively, you can use a plugin like Insert Headers and Footers to add the code without editing theme files directly.

note

If you are using a page builder (like Elementor or Divi), look for a "Custom Code" or "Footer Scripts" option in the builder's settings.

Shopify​

  1. In your Shopify admin, go to Online Store > Themes.
  2. Click Actions > Edit Code on your active theme.
  3. Open the theme.liquid file under the Layout folder.
  4. Paste the widget code just before the closing </body> tag.
  5. Click Save.

WooCommerce​

WooCommerce runs on WordPress, so the installation steps are the same as the WordPress instructions above.

Wix​

  1. In your Wix dashboard, go to Settings > Custom Code.
  2. Click Add Custom Code.
  3. Paste the widget code into the code field.
  4. Set the placement to Body - End.
  5. Choose to apply it to All Pages.
  6. Click Apply.

Squarespace​

  1. In your Squarespace admin, go to Settings > Advanced > Code Injection.
  2. Paste the widget code into the Footer field.
  3. Click Save.

Custom HTML​

If you manage your website's HTML directly, open your main layout or template file and paste the widget code just before the closing </body> tag. If your site has multiple HTML files, add it to each page or use a shared template.

Verifying the Widget Appears​

After you install the code:

  1. Open your website in a browser.
  2. Look for the Knock Knock App widget icon in the bottom corner of your page.
  3. Click the icon to open the chat window and confirm it is working.
tip

Open your site in an incognito or private browsing window to see it as a first-time visitor would.

Troubleshooting​

If the widget does not appear after installation, try these steps:

  • Check for ad blockers. Some browser extensions or ad blockers can prevent widgets from loading. Disable them temporarily and reload the page.
  • Verify script placement. Make sure the code is placed before the closing </body> tag, not inside the <head> section or within another script block.
  • Clear your cache. Your browser or your website's caching plugin may be serving an older version of the page. Clear the cache and reload.
  • Check for JavaScript errors. Open your browser's developer console (usually F12) and look for any error messages that might indicate a conflict with other scripts.
  • Confirm the widget is active. Go to your Knock Knock App dashboard and make sure the widget is enabled for your site.
warning

If you recently changed your website's theme or template, you may need to re-add the widget code. Theme updates can overwrite custom code in footer files.

Next Steps​

With the widget live on your site, you are ready to wrap up your setup. Follow the Quick Start Checklist to make sure you have covered all the essentials.