August 10, 2025

Blogger Product Carousel with WhatsApp Floating Button

Blogger Product Carousel with WhatsApp Floating Button

A sleek, responsive carousel that shows live previews of Blogger pages and includes a floating WhatsApp button so visitors can message you instantly.

🔎 Live Demo View Script on GitHub

Why this tool?

Embedded, fixed-size centered iframe previews so demos fit nicely inside each carousel slide.
Floating WhatsApp button lets visitors start a chat instantly (works with mobile & web).
Designed to be Blogger-friendly: paste into an HTML/JavaScript gadget or post HTML view.
Lightweight, responsive, and customizable—replace iframe links, images or the WhatsApp number easily.

Quick install

Open your Blogger dashboard → Layout → Add a Gadget → choose HTML/JavaScript.
Paste the carousel HTML (from the GitHub repo) into the gadget content area and save.
Customize iframe links and WhatsApp number in the script if desired.
Preview the blog and move the gadget where you want it to appear.

Files in this repo

index.html — demo & embed preview
style.css — all visual styles
script.js — helpers (WhatsApp link)
README.md — install & customization

🔗 Open repo on GitHub

Copy / Paste

Prefer quick paste? Click below to copy the embed-ready HTML (opens GitHub file).

📋 View index.html

Tips & troubleshooting

If an iframe shows a blank page, the target site may block embedding with X-Frame-Options. Use the "Open Live Preview" button instead.
Use images around 260×200 px for best fit inside the demo frames.
To change the WhatsApp number, update the phone in script.js to your international format (no “+” or spaces).

Comments