{"id":968,"date":"2026-03-26T12:37:55","date_gmt":"2026-03-26T12:37:55","guid":{"rendered":"https:\/\/siteleads.ai\/docs\/?post_type=docs&#038;p=968"},"modified":"2026-05-14T15:30:06","modified_gmt":"2026-05-14T15:30:06","password":"","slug":"whatsapp-channel-configuration","status":"publish","type":"docs","link":"https:\/\/siteleads.ai\/docs\/whatsapp-channel-configuration\/","title":{"rendered":"WhatsApp channel configuration"},"content":{"rendered":"\n<p>The WhatsApp widget allows visitors to your website to send you a WhatsApp message directly by clicking a button displayed on the screen. When a visitor clicks it, they are taken straight into a WhatsApp chat with your number \u2014 making it quick and easy for them to get in touch.<\/p>\n\n\n\n<p>You can add one or more WhatsApp numbers, assign them to specific team members or departments, set their availability hours, and customise how the widget appears to your visitors. This guide will walk you through every step of the setup process in plain, simple language \u2014 no technical knowledge required.<\/p>\n\n\n\n<p><strong>Important:<\/strong>&nbsp;The WhatsApp number you add must be an active WhatsApp account. Make sure the number is registered on WhatsApp before adding it here, otherwise visitors will not be able to reach you.<\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-vimeo wp-block-embed-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"SiteLeads - WhatsApp Contact Widget\" src=\"https:\/\/player.vimeo.com\/video\/1192244565?h=b9de402b0a&amp;dnt=1&amp;app_id=122963\" width=\"800\" height=\"450\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step1\">Adding the WhatsApp Channel to Your Widget<\/h3>\n\n\n\n<p>When you first open the widget settings, you will land on the&nbsp;<strong>Channel Selection<\/strong>&nbsp;screen. This is where you choose which contact channels you want to display on your website \u2014 such as WhatsApp, Phone, Email, and others.<\/p>\n\n\n\n<p>To add the WhatsApp channel:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click on&nbsp;<strong>WhatsApp<\/strong>&nbsp;to add it to your widget.<\/li>\n\n\n\n<li>Once selected, it will appear in your active channels list at the bottom of the screen.<\/li>\n\n\n\n<li>You will know it has been added when you see a green WhatsApp icon with the label&nbsp;<strong>WhatsApp<\/strong>&nbsp;in the list.<\/li>\n<\/ol>\n\n\n\n<p><strong>Note:<\/strong>&nbsp;You can add multiple channels at the same time. WhatsApp is just one of several options available to you alongside Phone, Email, and others.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step2\">Entering Your WhatsApp Number and Contact Details<\/h3>\n\n\n\n<p>After adding the WhatsApp channel, a row of fields will appear for you to fill in. These fields control how your WhatsApp contact is displayed to visitors on your website.<\/p>\n\n\n\n<p>Here is what each field means:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>WhatsApp<\/strong>&nbsp;\u2014 Type in the WhatsApp number you want visitors to message. Always include your country code (for example, +1 for the United States, +44 for the United Kingdom).<\/li>\n\n\n\n<li><strong>Channel label<\/strong>&nbsp;\u2014 This is the text shown to your website visitors next to the WhatsApp button. By default it says &#8220;WhatsApp&#8221; but you can change it to something like &#8220;Chat with Us&#8221; or &#8220;Message Us on WhatsApp&#8221;.<\/li>\n\n\n\n<li><strong>Custom image<\/strong>&nbsp;\u2014 If you would like to use your own icon instead of the default WhatsApp icon, click&nbsp;<strong>Choose file<\/strong>&nbsp;and upload your image.<\/li>\n\n\n\n<li><strong>Channel color<\/strong>&nbsp;\u2014 Click the colour box to pick a colour for your WhatsApp button. The default is WhatsApp green, but you can change it to match your website&#8217;s branding.<\/li>\n\n\n\n<li><strong>Show on<\/strong>&nbsp;\u2014 Select whether the WhatsApp button should appear on&nbsp;<strong>Desktop<\/strong>,&nbsp;<strong>Mobile<\/strong>, or both by clicking the relevant icons.<\/li>\n<\/ul>\n\n\n\n<p><strong>Tip:<\/strong>&nbsp;If you have more than one WhatsApp number \u2014 for example, a separate number for Sales and for Support \u2014 click the&nbsp;<strong>Add new contact<\/strong>&nbsp;button at the top right to add another row and fill in the details the same way.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step3\">Editing Individual Contact Settings<\/h3>\n\n\n\n<p>Each WhatsApp contact you add has its own individual settings panel. These allow you to personalise each contact further and make it easier for visitors to know who they are reaching out to before they start a conversation.<\/p>\n\n\n\n<p>To open a contact&#8217;s settings:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Find the contact row you want to edit.<\/li>\n\n\n\n<li>Click the&nbsp;<strong>Settings<\/strong>&nbsp;button on the right-hand side of that row.<\/li>\n\n\n\n<li>A panel called&nbsp;<strong>WhatsApp contact settings<\/strong>&nbsp;will open.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"step3a\">Role and Contact Avatar<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Role<\/strong>&nbsp;\u2014 Enter the role of the person behind this number, for example &#8220;Customer Support&#8221;, &#8220;Sales&#8221;, or &#8220;Billing&#8221;. This will be shown to visitors so they know who they are messaging before they reach out.<\/li>\n\n\n\n<li><strong>Contact avatar<\/strong>&nbsp;\u2014 Upload a photo or image for this contact by clicking&nbsp;<strong>Choose file<\/strong>. Adding a photo gives a personal touch and helps visitors feel more comfortable starting a conversation.<\/li>\n<\/ul>\n\n\n\n<p>Once you have made your changes, click&nbsp;<strong>Update contact<\/strong>&nbsp;to save them.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step4\">Setting Your Availability Schedule<\/h3>\n\n\n\n<p>You may not want the WhatsApp button to be visible to visitors outside of your working hours \u2014 especially if no one will be available to respond to messages. The&nbsp;<strong>Date Scheduling<\/strong>&nbsp;section lets you control exactly when each contact appears on your website, down to specific hours on specific days of the week.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"step4a\">Choosing Availability Per Day<\/h4>\n\n\n\n<p>You will see a grid showing all seven days of the week \u2014 Monday through to Sunday. For each day, click the dropdown menu and select one of the following options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>All day<\/strong>&nbsp;\u2014 The contact will be visible to visitors throughout the entire day. This is the default setting.<\/li>\n\n\n\n<li><strong>Scheduled<\/strong>&nbsp;\u2014 Choose this option to set specific hours. For example, you may want the WhatsApp button to appear only between 9:00am and 6:00pm on weekdays.<\/li>\n\n\n\n<li><strong>Unavailable<\/strong>&nbsp;\u2014 Choose this to hide the contact completely on that day, for example on weekends or public holidays when your team is not available.<\/li>\n<\/ul>\n\n\n\n<p><strong>Tip:<\/strong>&nbsp;Setting accurate availability hours is especially important for WhatsApp, as visitors will expect a response when they see the button. Hiding it outside working hours avoids frustration from unanswered messages.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"step4b\">Copying a Schedule to Multiple Days<\/h4>\n\n\n\n<p>If your availability is the same across several days, you do not need to set each one individually. You can copy one day&#8217;s schedule to other days quickly:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the&nbsp;<strong>copy icon<\/strong>&nbsp;(the two overlapping squares) next to the day you want to copy from.<\/li>\n\n\n\n<li>A small menu will appear listing all the other days of the week.<\/li>\n\n\n\n<li>Tick the days you want to apply the same schedule to.<\/li>\n\n\n\n<li>Click&nbsp;<strong>Apply<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p>The schedule will be copied across to all the days you selected automatically.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"step4c\">Setting Your Time Zone<\/h4>\n\n\n\n<p>At the bottom of the scheduling section you will find a&nbsp;<strong>Time zone<\/strong>&nbsp;dropdown. Make sure this is set to the correct time zone for your business so that your availability hours display accurately to visitors, regardless of where they are located in the world. By default, it is set to match your website&#8217;s time zone.<\/p>\n\n\n\n<p>When you are happy with all the settings, click&nbsp;<strong>Update contact<\/strong>&nbsp;to save.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step5\">Customizing the Multi-Contact Pop-Up Message<\/h3>\n\n\n\n<p>If you have added more than one WhatsApp contact \u2014 for example, a Sales number and a Support number \u2014 visitors will see a small pop-up when they click the widget button, showing all available contacts for them to choose from. You can customise the text shown in this pop-up to make it feel more welcoming and on-brand.<\/p>\n\n\n\n<p>To customise the pop-up message:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the&nbsp;<strong>Multi-contact settings<\/strong>&nbsp;button at the top of the WhatsApp channel panel.<\/li>\n\n\n\n<li>A window will appear with two fields to fill in:<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Headline<\/strong>&nbsp;\u2014 This is the bold title text shown at the top of the pop-up. For example:&nbsp;<em>&#8220;We&#8217;re here to help!&#8221;<\/em><\/li>\n\n\n\n<li><strong>Welcome message text<\/strong>&nbsp;\u2014 This is the smaller description text shown below the headline. For example:&nbsp;<em>&#8220;How can we assist you today?&#8221;<\/em><\/li>\n<\/ul>\n\n\n\n<p>Type in whatever text feels right for your business, then click&nbsp;<strong>Update<\/strong>&nbsp;to save your changes.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"done\">Final Notes<\/h3>\n\n\n\n<p>Your WhatsApp widget is now fully set up. Visitors to your website will be able to see your WhatsApp contact button, know who they are messaging, and reach out during the hours you have specified.<\/p>\n\n\n\n<p>If you ever need to make changes \u2014 such as updating a WhatsApp number, adding a new contact, or adjusting your availability hours \u2014 simply return to the widget settings area and follow the same steps outlined in this guide.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The WhatsApp widget allows visitors to your website to send you a WhatsApp message directly by clicking a button displayed on the screen. When a visitor clicks it, they are taken straight into a WhatsApp chat with your number \u2014 making it quick and easy for them to get in touch. You can add one [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[38],"doc_tag":[],"class_list":["post-968","docs","type-docs","status-publish","hentry","doc_category-contact-widget-configuration"],"year_month":"2026-05","word_count":1263,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Olumide","author_nicename":"olumide-akintunde","author_url":"https:\/\/siteleads.ai\/docs\/author\/olumide-akintunde\/"},"doc_category_info":[{"term_name":"Contact Widget Configuration","term_url":"https:\/\/siteleads.ai\/docs\/docs-category\/contact-widget-configuration\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/siteleads.ai\/docs\/wp-json\/wp\/v2\/docs\/968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siteleads.ai\/docs\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/siteleads.ai\/docs\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/siteleads.ai\/docs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/siteleads.ai\/docs\/wp-json\/wp\/v2\/comments?post=968"}],"version-history":[{"count":4,"href":"https:\/\/siteleads.ai\/docs\/wp-json\/wp\/v2\/docs\/968\/revisions"}],"predecessor-version":[{"id":1092,"href":"https:\/\/siteleads.ai\/docs\/wp-json\/wp\/v2\/docs\/968\/revisions\/1092"}],"wp:attachment":[{"href":"https:\/\/siteleads.ai\/docs\/wp-json\/wp\/v2\/media?parent=968"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/siteleads.ai\/docs\/wp-json\/wp\/v2\/doc_category?post=968"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/siteleads.ai\/docs\/wp-json\/wp\/v2\/doc_tag?post=968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}