WhatsApp Widget Generator — User Guide (DCT Apps)

Create a floating WhatsApp chat button for desktop, tablet, and mobile. Lightweight and copy-paste ready.

Date updated: 02 Sep 2025

What this tool does

  • Generates one HTML snippet that adds a floating WhatsApp button to your page.
  • Customises phone number, default message, side, animation, helper text, and device visibility.
  • No external libraries on your site. Paste the snippet and publish.

Quick start

  1. Open the WhatsApp Widget Generator page.
  2. Enter your phone number with country code. Example: +6281234567890.
  3. Type a default message. Example: Hi, I have a quick question.
  4. Select the position. Bottom right or bottom left.
  5. Pick an animation or select no animation.
  6. Optional: add helper text such as “Chat with us”.
  7. Choose device visibility for mobile, iPad, desktop.
  8. Click Generate Widget Code then Copy Code.
  9. Paste into your page and publish.

Install on Systeme.io

  1. Open your funnel or website page in the Systeme.io editor.
  2. Drag an HTML block onto the page. The widget floats at the bottom corner so any placement is fine.
  3. Paste the generated snippet into the HTML block.
  4. Save then preview or publish.

Tip: For multiple pages, add the snippet to each page or to a global footer if available.

Settings explained

Phone number

Use full international format with the plus sign. Spaces and dashes are cleaned in the code.

Default message

Pre-fills the chat box. The generator encodes it for the URL automatically.

Widget position

Bottom right or bottom left. Helper text appears on the inner side for readability.

Animation

Pulse, Bounce, Shake, Swing, Tada, Heartbeat, Wobble, Jello, Flash, Rubber Band, or No animation.

Widget text

Optional pill text. Choose a preset or type your own short label.

Visibility

Select which devices should display the widget: mobile, tablet, desktop.

Preview and copy

  • The live preview updates as soon as a valid phone number is entered.
  • Click Generate Widget Code to refresh the snippet.
  • Click Copy Code and paste it into your page HTML block.

Best practices

  • Use a monitored business number during your stated hours.
  • Keep the default message short and friendly.
  • Avoid stacking two WhatsApp widgets from different tools on the same page.
  • Test on a real phone and on desktop after publishing.

Troubleshooting

Button not visible
  • At least one device visibility must be selected when generating the snippet.
  • Another floating element or CSS may hide fixed items. Test on a blank page.
  • Do not paste inside a popup HTML block. Place in main page body.
WhatsApp opens with the wrong number
  • Use full international format with the plus sign. Example: +62...
  • Regenerate and republish after fixing the number.
Helper text overlaps other sticky items
  • Switch the corner or remove the helper text.
  • Reduce other sticky elements in that corner such as cookie banners.
Animation too distracting
  • Use Pulse or select No animation and regenerate the snippet.

Privacy and compliance

  • The widget links to WhatsApp using https://wa.me/<number>?text=<message>.
  • The snippet does not store data. Conversations happen inside WhatsApp.
  • If you collect personal data later in your funnel, include the correct privacy notices.

How to remove the widget

  1. Open the page editor where the snippet was added.
  2. Delete the HTML block that contains the code.
  3. Save and publish.

FAQ

Can I use multiple numbers
Use one widget per page for clarity. For multiple teams, place different numbers on different pages.

Will this slow down my page
The snippet is lightweight and self-contained. Impact is minimal.

Does it work with dark themes
Yes. The button has its own styles and remains visible on light and dark pages.