Add Holidoodle to Next.js

Paste one line once. From then on your Next.js site greets each visitor on their own country's holidays, in their language, with your logo.

1. Copy your line

Sign in to your Holidoodle dashboard to get your key, or use the line below and replace YOUR_KEY.

2. Paste it in Next.js

1. App Router: open app/layout.tsx (the root layout) and add import Script from 'next/script'.
2. Inside <body>, after {children}, add: <Script src="https://holidoodle.dev/embed.js" data-key="YOUR_KEY" strategy="afterInteractive" />.
3. Pages Router: open pages/_app.tsx (or .js), import Script from 'next/script' and render the same <Script ... /> next to <Component {...pageProps} />.
4. Alternatively, with the Pages Router put a plain <script src="..." data-key="YOUR_KEY" async></script> inside <Head> in pages/_document.tsx.
5. Deploy.

Where the code goes: <Script> in app/layout.tsx (App Router) or pages/_app.tsx (Pages Router).

Good to know

• Next.js forwards data-* attributes on <Script> to the final <script> element, so data-key works.
• The script runs once per full page load. Client-side route changes don't re-run it, and the widget has to handle navigation itself.
• A strict Content-Security-Policy must allow script-src and connect-src for holidoodle.dev.
• Don't use strategy="worker": it runs in a web worker with no direct DOM access.

3. Check it works

Run the production build (next build && next start) or the deployed site, then check DevTools → Elements for the embed.js script tag and Network for a 200.

To see a holiday right now, open your site with ?hd_country=TR&hd_date=2026-10-29 at the end of the address. Any country and date work.

Source: Next.js help