How to Add a Video Widget to Any Website (No Developer Needed)

A video widget is a small embedded element that plays short video answers from a real person directly on your web pages, so visitors can get a human reply to a question without leaving the page, filling a form, or waiting for a reply. This guide shows how to add one to any website in about five minutes using Nook, which installs with a single script tag.

You don't need a developer, a video team, or any code beyond pasting one line. Here's the whole process.

Step 1, Record your answers

Think of the three to five questions visitors ask most often, "How much does it cost?", "Is this right for me?", "How do I get started?" In your Nook dashboard, add each question and record a 20-30 second answer from your webcam or phone. Nook drafts a short script for each one and shows it as a teleprompter while you record, so you never freeze on camera. Keep it casual; a real, slightly imperfect human answer outperforms a polished one.

Step 2, Copy your script tag

Nook gives you a one-line snippet that looks like this:

<script src="https://cdn.usenook.live/embed/presence.min.js"
        data-key="YOUR_SITE_KEY"
        data-api="https://edge.usenook.live" async></script>

Paste it once, just before the closing </body> tag. That's the entire install. Below is where to put it on the most common platforms.

Add it on WordPress

Use a "header and footer scripts" plugin (such as WPCode or Insert Headers and Footers), paste the snippet into the Footer box, and save. No theme editing required. On block themes you can also add it via a Custom HTML block in the footer template.

Add it on Webflow

Go to Project Settings → Custom Code → Footer Code, paste the snippet, save, and publish. For a single page only, use the page's settings → Before </body> tag.

Add it on Shopify

In your theme, open Online Store → Themes → Edit code, open theme.liquid, and paste the snippet right before </body>. Save. It now loads across your storefront. Use Nook's per-page targeting to show product questions only on product pages.

Add it on Squarespace

Go to Settings → Advanced → Code Injection and paste the snippet into the Footer field. Save. (Code injection is available on Business and Commerce plans.)

Add it on Framer

Open Project Settings → General → Custom Code → End of <body> tag, paste the snippet, and publish.

Add it on Next.js / React

Drop a <Script> tag (from next/script) with strategy="afterInteractive" in your root layout, or self-host the bundle and import it. Nook ships a versioned, integrity-checked build if you'd rather serve it first-party for strict CSPs.

Step 3, Target the right pages (optional)

By default the widget shows everywhere. In the dashboard you can choose "Specific pages" and point a question at a path like /pricing, so pricing questions appear on the pricing page and product questions on product pages. This page-awareness is what makes the answers feel relevant instead of generic.

Does a video widget slow down your site?

It shouldn't, if it's built right. Nook loads asynchronously inside a Shadow DOM (so it can't clash with your styles), is fail-safe (a problem never breaks your page), and only downloads a video when a visitor actually taps a question. The result is essentially zero impact on initial page load.

FAQ

Do I need to know how to code? No, pasting one line into a footer field is the whole job on every platform above.

How many videos should I start with? Three to five. Cover your most common questions first; you can always add more.

Can I change the answers later? Yes, re-record any answer anytime and it updates instantly across your site.

Is there a free option? Yes, Nook's free plan covers one site with up to three questions.

How to add a video widget to any website