Back to all articles
How to's
WhatsApp 101

How to create a Whatsapp custom link & widget on your website

Whatsapp marketing and support widgets are about to replace traditional pop-ups and static FAQs to enhance customer experience. Get ready and jump in!

Kiosk CEO - Paul Lafforgue - Expert in WhatsApp Marketing
WRITTEN BY
Paul Lafforgue

Co-founder & CEO @Kiosk

Kiosk - How to create a Whatsapp custom link & widget on your website

Introduction

In today's digitally driven marketplace, WhatsApp is emerging as a key player in customer engagement strategies. As businesses seek more intimate and direct ways to connect with their audience, the shift towards WhatsApp as a primary communication tool is undeniable. This guide delves into the art of creating a custom WhatsApp widget and link for your website, an innovation that seamlessly bridges the gap between online presence and personal interaction. By integrating such features, businesses can offer a more tailored and responsive communication channel, encouraging real-time conversations with potential leads and existing customers alike.

1. Create a CTA button or a redirection link directly in your customer flow

The landscape of online customer engagement is evolving, with WhatsApp buttons increasingly taking the spotlight from traditional chatbots. These buttons offer a direct line to your business, providing a more personal and immediate form of communication.

How to create a CTA button

Kiosk tips
Link to your phone number: tart by using the phone number you use for sales calls. The trigger will come from your leads/clients when they click to start a chat.

2. Concatenate your message inside a link

"Concatenate" might sound technical, but it's simply about creating a custom URL that embeds a predefined message, streamlining the initiation of a conversation on WhatsApp. This method is perfect for tailoring communication in lead qualification flows or re-engagement campaigns, making the first step towards interaction as smooth as possible.

How to concatenate

Basic rules on concatenation

A WhatsApp URL opener is composed as follows:

The URL that will open a conversation with a phone number: https://api.whatsapp.com/send/?phone=33756758564
To this URL you can concatenate text to it by adding &text= : https://api.whatsapp.com/send/?phone=33756758564&text=I want to try Kiosk (This URL opener can be used easily as a trigger. After the first message, you will have to start answering manually. If you want to build automations, have a look at chapters 2 and 3.)
Add text: “&text=”Example: https://api.whatsapp.com/send/?phone=33698820191**&text=Hello**
Add a space in the text: “%20”Example:  I want to try kiosk = I%20want%20to%20try%20Kiosk%20
Kiosk tips
Looking to add custom variables? Consider using Airtable or Gsheets and create custom formulas like this: https://api.whatsapp.com/send/?phone=33698820191”&"?text=Bonjour%20(first name),%20voici%20un%20lien%20(lien)</aside>

3. Use QR codes

QR codes offer a bridge between physical and digital marketing materials, allowing customers to scan and start a WhatsApp chat instantly. This seamless transition from viewing a poster or email to engaging in a personal conversation can significantly enhance the customer experience, making your brand more accessible and responsive.

How to use QR codes

Kiosk tips
QR codes in marketing materials: Incorporate QR codes in your physical and digital marketing materials (like brochures, posters, emails). Scanning these codes can directly open a chat with your business on WhatsApp.
Social media integration: Use WhatsApp QR codes or direct links in your social media profiles and posts. This makes transitioning from social media to a personal chat on WhatsApp seamless.

4. Create simple CTAs (’call to action’)

A clear and compelling call to action is the cornerstone of effective customer engagement. By inviting users to chat on WhatsApp with straightforward and enticing CTAs, you can increase the likelihood of initiating conversations, offering instant support or exclusive deals to those who reach out.

How to create CTAs

Kiosk tips
Clear and concise CTAs: Use straightforward and easy-to-understand call-to-action phrases like "Chat with us on WhatsApp for more information!" or "Got questions? WhatsApp us!"
Incentivize the interaction: Provide an incentive in your CTAs, like exclusive offers or instant support, to encourage users to initiate conversations.

C- Integrate it where users need to reach out

Strategically placing your WhatsApp integration points where users are most likely to have questions or need support enhances the user experience. This could be within customer support sections, event registration pages, or post-purchase communications, ensuring that help is always just a WhatsApp message away.

How to integrate it

Kiosk tips
Customer support integration: Position WhatsApp as a primary channel for customer support. Encourage customers to use WhatsApp for queries, order tracking, and assistance.
Event registrations and bookings: Use WhatsApp for completing event registrations, bookings, or appointments. This simplifies the process and increases user interaction.
Post-purchase engagement: Send order confirmations, delivery updates, and post-purchase follow-ups through WhatsApp to keep the conversation going.

Conclusion

The digital age demands that businesses adopt more direct and personal ways to engage with their audience. Creating a custom WhatsApp widget and link for your website is a step towards achieving this, offering your customers a seamless pathway to real-time conversations. By following these steps, you can create an environment where every interaction is an opportunity to build trust and loyalty.

For those ready to take the next step but unsure where to start, our team at Kiosk would be happy to talk.

Instructions
If you intend to use this component with Finsweet's Table of Contents attributes follow these steps:
  1. Remove the current class from the content27_link item as Webflows native current state will automatically be applied.
  2. To add interactions which automatically expand and collapse sections in the table of contents select the content27_h-trigger element, add an element trigger and select Mouse click (tap)
  3. For the 1st click select the custom animation Content 27 table of contents [Expand] and for the 2nd click select the custom animation Content 27 table of contents [Collapse].
  4. In the Trigger Settings, deselect all checkboxes other than Desktop and above. This disables the interaction on tablet and below to prevent bugs when scrolling.