Skip to main content

Installation

Installing the Knock Knock App widget on your website takes just a few minutes. You copy a small snippet of code from your settings and paste it into your site. Once it is in place, the widget appears automatically for all your visitors.

Getting Your Embed Code​

  1. Go to Settings > Widget > Install
  2. You will see your unique embed code displayed in a code block
  3. Click Copy to copy the code to your clipboard

This embed code is unique to your account. It connects the widget on your website to your Knock Knock App dashboard, so all conversations, leads, and settings are linked automatically.

warning

Do not share your embed code publicly or post it in places where unauthorized parties could use it. The code is tied to your account and should only be placed on websites you own or manage.

Platform Guides​

Below are step-by-step instructions for the most popular website platforms.

WordPress​

  1. Log in to your WordPress admin panel
  2. Go to Appearance > Theme Editor, or use a plugin like Insert Headers and Footers
  3. If using the Theme Editor, open your theme's footer.php file
  4. Paste the embed code just before the closing </body> tag
  5. Click Save
  6. Visit your website to confirm the widget appears
tip

Using a header/footer plugin is the easiest approach for WordPress. It keeps your embed code safe even when you update or change your theme.

Shopify​

  1. Log in to your Shopify admin
  2. Go to Online Store > Themes
  3. Click Actions > Edit Code on your active theme
  4. Open the theme.liquid file under Layout
  5. Paste the embed code just before the closing </body> tag
  6. Click Save
  7. Visit your storefront to confirm the widget appears

WooCommerce​

WooCommerce runs on WordPress, so the installation process is the same as the WordPress instructions above. Follow the WordPress steps to add the embed code to your site.

Wix​

  1. Log in to your Wix dashboard
  2. Go to Settings > Custom Code (under Advanced)
  3. Click Add Custom Code
  4. Paste the embed code into the code field
  5. Set the placement to Body - End
  6. Choose to apply the code to All pages
  7. Click Apply
  8. Visit your website to confirm the widget appears

Squarespace​

  1. Log in to your Squarespace account
  2. Go to Settings > Advanced > Code Injection
  3. Paste the embed code into the Footer field
  4. Click Save
  5. Visit your website to confirm the widget appears

Custom HTML​

If your website is built with plain HTML or a framework not listed above:

  1. Open your main HTML file (often index.html or your layout template)
  2. Find the closing </body> tag
  3. Paste the embed code directly before it
  4. Save the file and deploy your changes
  5. Visit your website to confirm the widget appears

For single-page applications or JavaScript frameworks, you can also add the embed code to your root HTML template or load it dynamically after the page mounts.

Testing and Verification​

After installing the embed code, you should verify that everything is working correctly:

  1. Open your website in a browser (use an incognito or private window for the cleanest test)
  2. Look for the widget in the corner of the page — it should match the style you configured in Styles and Appearance
  3. Click the widget to make sure it opens and displays your channels
  4. Send a test message through the chat to confirm it appears in your Knock Knock App dashboard
  5. Check the dashboard — go to your Knock Knock App dashboard and verify the test conversation shows up
tip

If you just installed the code and do not see the widget, try clearing your browser cache or opening the page in a private browsing window. Cached versions of your site may not include the new code yet.

Troubleshooting​

The Widget Does Not Appear​

Ad blockers — Some browser extensions and ad blockers may prevent the widget from loading. Try disabling your ad blocker temporarily and refreshing the page.

Browser caching — Your browser may be showing a cached version of your page that does not include the embed code. Clear your cache or use a private browsing window.

Script placement — Make sure the embed code is placed just before the closing </body> tag, not inside the <head> section. Incorrect placement can prevent the widget from rendering properly.

Multiple installations — If the embed code appears more than once on your page, it may cause conflicts. Make sure you only have one copy of the code on each page.

The Widget Appears But Does Not Work​

Check your channels — Make sure you have at least one channel enabled in Channels. If all channels are disabled, the widget may appear but will not offer any interaction options.

Check your working hours — If you have configured Working Hours, the widget may show an offline state outside those hours. Try testing during your configured working hours.

Browser compatibility — The widget works on all modern browsers. If you are using an outdated browser, try updating it to the latest version.

note

If you continue to experience issues after trying these steps, reach out to the Knock Knock App support team through your dashboard for personalized help.

Next Steps​

Now that your widget is live, set up your Working Hours so the widget knows when your team is available.