In this tutorial, we are going to create a Quick Support / Feels like Live Chat widget using Blokcsy Popup, kadence Blocks and any Form Plugin. You can use any other Blocks plugin which have “Tab” Element.
Earlier I used the WP Social Ninja Plugin to create this but it needs the pro version to work which means I need 2 plugins just to have a Quick Support widget, so I thought let’s try to be a bit creative.
At the end of this tutorial, you will be able to have a widget similar to what my thumbnail video shows.
What are the prerequisites?
You need to have
- Blokcsy Pro
- Kadence Blocks Pro
- Or any other Block Plugin which supports Tabs
- Any Form Plugins with Conversational Type form
- WP Forms Pro / Fluent Form Pro Recommended
- A bit of understanding of JS / HTML to modify it according to your needs.
1. Create a Button with Blocksy Popup
We will need to create a Popup which is just a Button to trigger Live Chat. This popup is set to load after 2 seconds of the page load, targeted globally on site. So no matter on which page you are, this button will be visible at the bottom right corner. Add a class .chat-box in this button/section whatever you use, we will use this class to trigger our next popup.
This is how it looks in my case, I used Kadence Section, inside that I have and Image (SVG icon) and a Heading.
The section on Kadence Blocks is flex, so in my case flex direction is row. You can copy the below code and paste directly if you using Kadence Blocks and it will look same button as mine, then change anything you want.
Kadence Blocks ( Button Code )
<!-- wp:kadence/column {"background":"#000000","borderWidth":["","","",""],"borderRadius":[500,500,500,500],"uniqueID":"3112_7edf8a-45","direction":["horizontal","",""],"justifyContent":["center","center",""],"gutter":[8,"",""],"gutterVariable":["custom","",""],"verticalAlignment":"middle","shadowHover":[{"color":"#002237","opacity":0.25,"spread":0,"blur":25,"hOffset":0,"vOffset":0,"inset":false}],"link":"#","maxWidth":[200,180,170],"height":[40,"",""],"padding":[8,15,8,15],"kbVersion":2,"className":"chat-box"} -->
<div class="wp-block-kadence-column kadence-column3112_7edf8a-45 kb-section-has-link kb-section-dir-horizontal chat-form"><div class="kt-inside-inner-col"><!-- wp:kadence/image {"id":3115,"imgMaxWidth":40,"imgMaxWidthTablet":35,"imgMaxWidthMobile":30,"sizeSlug":"full","ratio":"square","useRatio":true,"linkDestination":"none","uniqueID":"3112_7e8f82-72","marginDesktop":["","","0",""]} -->
<figure class="wp-block-kadence-image kb-image3112_7e8f82-72 size-full kb-image-is-ratio-size image-is-svg"><div class="kb-is-ratio-image kb-image-ratio-square"><img src="https://sk748bymj0.onrocket.site/wp-content/uploads/2024/05/chat-1.svg" alt="" class="kb-img wp-image-3115"/></div></figure>
<!-- /wp:kadence/image -->
<!-- wp:kadence/advancedheading {"uniqueID":"3112_a4eecf-35","color":"var(\u002d\u002dtheme-palette-color-8, #ffffff)","fontWeight":"bold","margin":["0","","0",""],"markBorder":"","markBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"tabletMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"mobileMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"colorClass":"palette-color-8","htmlTag":"p","fontHeight":[1,"",""],"fontHeightType":"em"} -->
<p class="kt-adv-heading3112_a4eecf-35 wp-block-kadence-advancedheading has-palette-color-8-color has-text-color" data-kb-block="kb-adv-heading3112_a4eecf-35">Need Help</p>
<!-- /wp:kadence/advancedheading --></div><a href="#" class="kb-section-link-overlay"></a></div>
<!-- /wp:kadence/column -->2. Create Another Popup for Chat Box
Now the button is created, you need to create the layout for Chatbox Popup, In this you can add whatever you want, design it however you want.
In my case this is how it looks, There is a JS code in between which I will explain later, I mainly used Section, Info Box, Row Layout and Tabs to create it. You can follow your own approach.
After you are done with design, set the poup to load on click and enter the same .chat-box CSS class that we added in Trigger Button.
Kadence Blocks (Chat Box Code)
<!-- wp:kadence/column {"background":"var(\u002d\u002dtheme-palette-color-8, #ffffff)","borderWidth":["","","",""],"borderRadius":[12,12,12,12],"uniqueID":"3127_7fbda9-39","displayShadow":true,"shadow":[{"color":"#0f374e","opacity":0.1,"spread":-5,"blur":20,"hOffset":0,"vOffset":0,"inset":false}],"displayHoverShadow":true,"shadowHover":[{"color":"#002237","opacity":0.15,"spread":-5,"blur":20,"hOffset":0,"vOffset":0,"inset":false}],"maxWidth":[420,420,420],"kbVersion":2,"className":"chat-container","kadenceBlockCSS":"\n/* Wpforms 3198 */\n#wpforms-3198{\n\tpadding: 15px 25px 25px 25px;\n}\n\n/* Wpforms page button */\n#wpforms-form-3198 .wpforms-page .wpforms-page-button{\n\tpadding-left:15px;\n\tpadding-right:15px;\n\tpadding-top:12px;\n\tpadding-bottom:12px;\n\tfont-size:18px;\n}\n\n/* Wpforms field pagebreak */\n#wpforms-form-3198 .wpforms-page .wpforms-field-pagebreak{\n\tmargin-top:15px;\n}\n\n/* Wpforms lead forms title */\n#wpforms-form-3198 .wpforms-lead-forms-title{\n\tfont-size:18px;\n\tmargin-bottom:15px;\n}\n\n/* Wpforms lead forms progress */\n#wpforms-form-3198 .wpforms-page .wpforms-lead-forms-progress{\n\tmargin-top:15px;\n\t\n}\n\n\n/* Wpforms page */\n#wpforms-form-3198 .wpforms-page{\n\tmargin-top:5px;\n}\n\n/* Wpforms submit 3198 */\n#wpforms-submit-3198{\n\tpadding-left:15px;\n\tpadding-top:12px;\n\tpadding-right:15px;\n\tpadding-bottom:12px;\n\tfont-size:18px;\n}\n\n/* Wpforms submit container */\n#wpforms-form-3198 .wpforms-submit-container{\n\tmargin-top:15px;\n}\n\n/* Wpforms lead forms progress */\n#wpforms-form-3198 .wpforms-submit-container .wpforms-lead-forms-progress{\n\tmargin-top:15px;\n}\n\n/* Wpforms field */\n#wpforms-form-3198 .wpforms-page .wpforms-field{\n\tmargin-top:15px;\n}\n\n.ct-drawer-canvas .active .ct-popup-inner:has(#chat-area){\nmargin-bottom: 65px;\n}\n\n/* 689px and smaller screen sizes */\n@media (max-width:1000px){\n\n\t/* Mobile layout right golden */\n\t#chat-area .kt-mobile-layout-right-golden{\n\t\tgrid-template-columns:15fr 85.0fr;\n\t}\n}"} -->
<div class="wp-block-kadence-column kadence-column3127_7fbda9-39 chat-container"><div class="kt-inside-inner-col"><!-- wp:kadence/infobox {"uniqueID":"3127_149b4e-56","hAlign":"left","containerBackground":"var(\u002d\u002dtheme-palette-color-4, #002237)","containerPadding":["xs","sm","xs","sm"],"mediaType":"image","mediaAlign":"left","mediaImage":[{"url":"https://sk748bymj0.onrocket.site/wp-content/uploads/2024/02/18-1.png","id":1965,"alt":"","width":940,"height":788,"maxWidth":50,"hoverAnimation":"none","flipUrl":"","flipId":"","flipAlt":"","flipWidth":"","flipHeight":"","subtype":"png","flipSubtype":""}],"mediaIcon":[{"icon":"fe_aperture","size":50,"width":2,"title":"","color":"","hoverColor":"","hoverAnimation":"none","flipIcon":""}],"mediaStyle":[{"background":"","hoverBackground":"","border":"","hoverBorder":"","borderRadius":200,"borderWidth":[0,0,0,0],"padding":[0,0,0,0],"margin":[0,15,0,0]}],"titleColor":"var(\u002d\u002dtheme-palette-color-8, #ffffff)","titleHoverColor":"var(\u002d\u002dtheme-palette-color-8, #ffffff)","titleFont":[{"level":5,"size":["","",""],"sizeType":"px","lineHeight":["","",""],"lineType":"px","letterSpacing":"","textTransform":"","family":"","google":false,"style":"","weight":"","variant":"","subset":"","loadGoogle":true,"padding":[0,0,0,0],"paddingControl":"linked","margin":[0,0,0,0],"marginControl":"individual"}],"textColor":"var(\u002d\u002dtheme-palette-color-10, #c1cbd4)","textFont":[{"size":[16,"",""],"sizeType":"px","lineHeight":["","",""],"lineType":"px","letterSpacing":"","family":"","google":"","style":"","weight":"","variant":"","subset":"","loadGoogle":true,"textTransform":""}],"imageRatio":"square","borderStyle":[{"top":["rgba(237,242,247,0)","",0],"right":["rgba(237,242,247,0)","",0],"bottom":["rgba(237,242,247,0)","",0],"left":["rgba(237,242,247,0)","",0],"unit":"px"}],"borderRadius":[12,12,0,0],"kbVersion":2} -->
<div class="wp-block-kadence-infobox kt-info-box3127_149b4e-56"><span class="kt-blocks-info-box-link-wrap info-box-link kt-blocks-info-box-media-align-left kt-info-halign-left"><div class="kt-blocks-info-box-media-container"><div class="kt-blocks-info-box-media kt-info-media-animate-none"><div class="kadence-info-box-image-inner-intrisic-container"><div class="kadence-info-box-image-intrisic kt-info-animate-none kb-info-box-image-ratio kb-info-box-image-ratio-square"><div class="kadence-info-box-image-inner-intrisic"><img src="https://sk748bymj0.onrocket.site/wp-content/uploads/2024/02/18-1.png" alt="" width="940" height="788" class="kt-info-box-image wp-image-1965"/></div></div></div></div></div><div class="kt-infobox-textcontent"><h5 class="kt-blocks-info-box-title">Rita Brandes</h5><p class="kt-blocks-info-box-text">Typically Replies within a few minutes</p></div></span></div>
<!-- /wp:kadence/infobox -->
<!-- wp:kadence/column {"borderWidth":["","","",""],"uniqueID":"3127_ad6aca-68","padding":["md","md","md","md"],"kbVersion":2,"className":"chat-selection-area"} -->
<div class="wp-block-kadence-column kadence-column3127_ad6aca-68 chat-selection-area" id="chat-area"><div class="kt-inside-inner-col"><!-- wp:kadence/rowlayout {"uniqueID":"3127_4bc71c-60","mobileLayout":"right-golden","collapseGutter":"custom","customRowGutter":[15,"",""],"columnGutter":"custom","customGutter":[15,"",""],"colLayout":"right-golden","verticalAlignment":"middle","firstColumnWidth":15,"secondColumnWidth":85,"columnsUnlocked":true,"padding":["0","0","0","0"],"kbVersion":2} -->
<!-- wp:kadence/column {"borderWidth":["","","",""],"uniqueID":"3127_a6172e-db","kbVersion":2,"className":"image-container-cls"} -->
<div class="wp-block-kadence-column kadence-column3127_a6172e-db image-container-cls" id="image-container"><div class="kt-inside-inner-col"><!-- wp:kadence/image {"id":1965,"sizeSlug":"full","ratio":"square","useRatio":true,"linkDestination":"none","uniqueID":"3127_959980-75","marginDesktop":["","","0",""],"paddingDesktop":["","","0",""],"borderRadius":[50,50,50,50]} -->
<figure class="wp-block-kadence-image kb-image3127_959980-75 size-full kb-image-is-ratio-size"><div class="kb-is-ratio-image kb-image-ratio-square"><img src="https://sk748bymj0.onrocket.site/wp-content/uploads/2024/02/18-1.png" alt="" class="kb-img wp-image-1965"/></div></figure>
<!-- /wp:kadence/image --></div></div>
<!-- /wp:kadence/column -->
<!-- wp:kadence/column {"id":2,"background":"var(\u002d\u002dtheme-palette-color-6, #F3F4F6)","borderWidth":["","","",""],"borderRadius":[10,10,10,10],"uniqueID":"3127_a9d85a-f2","padding":[5,10,5,10],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column3127_a9d85a-f2"><div class="kt-inside-inner-col"><!-- wp:kadence/advancedheading {"uniqueID":"3127_e93879-96","margin":["","","xxs",""],"markBorder":"","markBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"tabletMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"mobileMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"htmlTag":"p"} -->
<p class="kt-adv-heading3127_e93879-96 wp-block-kadence-advancedheading" data-kb-block="kb-adv-heading3127_e93879-96">Hey there...<br>How can we help you?</p>
<!-- /wp:kadence/advancedheading --></div></div>
<!-- /wp:kadence/column -->
<!-- /wp:kadence/rowlayout -->
<!-- wp:html -->
<script>
document.addEventListener('DOMContentLoaded', function() {
function updateTabLinks(container) {
const tab1 = container.querySelector('#tab-tab1 a');
const tab2 = container.querySelector('#tab-tab2 a');
if (tab1) tab1.href = 'https://wa.me/494067555174';
if (tab2) tab2.href = 'tel:494067555174';
}
function handleTabClick(event) {
const target = event.currentTarget;
const href = target.getAttribute('href');
if (href) {
event.preventDefault();
window.location.href = href;
}
}
// Initial setup
updateTabLinks(document);
// Event delegation for main content
document.querySelector('#tab-tab1 a').addEventListener('click', handleTabClick);
document.querySelector('#tab-tab2 a').addEventListener('click', handleTabClick);
// MutationObserver to handle dynamic popup content
const popupContainer = document.getElementById('ct-popup-3127');
const observer = new MutationObserver(function(mutationsList) {
for (const mutation of mutationsList) {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
updateTabLinks(popupContainer);
const popupTab1 = popupContainer.querySelector('#tab-tab1 a');
const popupTab2 = popupContainer.querySelector('#tab-tab2 a');
if (popupTab1) popupTab1.addEventListener('click', handleTabClick);
if (popupTab2) popupTab2.addEventListener('click', handleTabClick);
}
}
});
observer.observe(popupContainer, { childList: true, subtree: true });
// Example trigger for the popup (you can replace this with your actual trigger)
document.querySelector('.chat-form').addEventListener('click', function() {
popupContainer.style.display = 'block';
updateTabLinks(popupContainer);
});
});
</script>
<!-- /wp:html -->
<!-- wp:kadence/advancedheading {"level":5,"uniqueID":"3127_d71849-cf","align":"center","margin":["","","0",""],"padding":["","","0",""],"markBorder":"","markBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"tabletMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"mobileMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"fontSize":[18,"",""]} -->
<h5 class="kt-adv-heading3127_d71849-cf wp-block-kadence-advancedheading" data-kb-block="kb-adv-heading3127_d71849-cf">Start Chat With:</h5>
<!-- /wp:kadence/advancedheading -->
<!-- wp:kadence/tabs {"uniqueID":"3127_52069d-83","mobileLayout":"tabs","contentBgColor":"var(\u002d\u002dtheme-palette-color-8, #ffffff)","contentBorderStyles":[{"top":["rgba(15,55,78,0)","",0],"right":["rgba(15,55,78,0)","",0],"bottom":["rgba(15,55,78,0)","",0],"left":["rgba(15,55,78,0)","",0],"unit":"px"}],"contentBorderRadius":[8,8,8,8],"innerPadding":["0","0","0","0"],"tabAlignment":"center","titles":[{"text":"Tab 1","icon":"fa_whatsapp","iconSide":"right","onlyIcon":true,"subText":"","anchor":""},{"text":"Tab 2","icon":"fe_phoneCall","iconSide":"right","onlyIcon":true,"subText":"","anchor":""},{"text":"Tab 3","icon":"ic_chat","iconSide":"right","onlyIcon":true,"subText":"","anchor":""}],"iSize":28,"mobileISize":28,"titleColor":"var(\u002d\u002dtheme-palette-color-8, #ffffff)","titleColorHover":"var(\u002d\u002dtheme-palette-color-8, #ffffff)","titleColorActive":"var(\u002d\u002dtheme-palette-color-8, #ffffff)","titleBg":"var(\u002d\u002dtheme-palette-color-1, #00B878)","titleBgHover":"var(\u002d\u002dtheme-palette-color-1, #00B878)","titleBgActive":"var(\u002d\u002dtheme-palette-color-1, #00B878)","titleBorder":"var(\u002d\u002dtheme-palette-color-1, #00B878)","titleBorderHover":"var(\u002d\u002dtheme-palette-color-1, #00B878)","titleBorderActive":"var(\u002d\u002dtheme-palette-color-1, #00B878)","titleBorderWidth":[1,1,1,1],"titleBorderRadius":[8,8,8,8],"titlePadding":[15,15,15,15],"mobileTitlePadding":["","","",12],"titleMargin":[12,4,16,4],"sizeType":"em","lineHeight":1.4,"lineType":"em","startTab":1} -->
<div class="wp-block-kadence-tabs alignnone"><div class="kt-tabs-wrap kt-tabs-id3127_52069d-83 kt-tabs-has-3-tabs kt-active-tab-1 kt-tabs-layout-tabs kt-tabs-tablet-layout-inherit kt-tabs-mobile-layout-tabs kt-tab-alignment-center "><ul class="kt-tabs-title-list"><li id="tab-tab1" class="kt-title-item kt-title-item-1 kt-tabs-svg-show-only kt-tabs-icon-side-right kt-tab-title-active"><a href="#tab-tab1" data-tab="1" class="kt-tab-title kt-tab-title-1 "><span class="kt-title-text">Tab 1</span><span data-name="fa_whatsapp" class="kadence-dynamic-icon"></span></a></li><li id="tab-tab2" class="kt-title-item kt-title-item-2 kt-tabs-svg-show-only kt-tabs-icon-side-right kt-tab-title-inactive"><a href="#tab-tab2" data-tab="2" class="kt-tab-title kt-tab-title-2 "><span class="kt-title-text">Tab 2</span><span data-name="fe_phoneCall" class="kadence-dynamic-icon"></span></a></li><li id="tab-tab3" class="kt-title-item kt-title-item-3 kt-tabs-svg-show-only kt-tabs-icon-side-right kt-tab-title-inactive"><a href="#tab-tab3" data-tab="3" class="kt-tab-title kt-tab-title-3 "><span class="kt-title-text">Tab 3</span><span data-name="ic_chat" class="kadence-dynamic-icon"></span></a></li></ul><div class="kt-tabs-content-wrap"><!-- wp:kadence/tab {"uniqueID":"_32683d-93"} -->
<div class="wp-block-kadence-tab kt-tab-inner-content kt-inner-tab-1 kt-inner-tab_32683d-93"><div class="kt-tab-inner-content-inner"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:kadence/tab -->
<!-- wp:kadence/tab {"id":2,"uniqueID":"_34a9e5-12"} -->
<div class="wp-block-kadence-tab kt-tab-inner-content kt-inner-tab-2 kt-inner-tab_34a9e5-12"><div class="kt-tab-inner-content-inner"></div></div>
<!-- /wp:kadence/tab -->
<!-- wp:kadence/tab {"id":3,"uniqueID":"_2dd26d-14"} -->
<div class="wp-block-kadence-tab kt-tab-inner-content kt-inner-tab-3 kt-inner-tab_2dd26d-14"><div class="kt-tab-inner-content-inner"><!-- wp:wpforms/form-selector {"clientId":"a6cb00c7-68f3-4957-b5a0-40771ceb1e49","formId":"3198","theme":"default-copy-1-copy-2-copy-3","themeName":"Default (Copy 3)","copyPasteJsonValue":"{\u0022displayTitle\u0022:false,\u0022displayDesc\u0022:false,\u0022theme\u0022:\u0022default-copy-1-copy-2-copy-3\u0022,\u0022themeName\u0022:\u0022Default (Copy 3)\u0022,\u0022fieldSize\u0022:\u0022medium\u0022,\u0022backgroundImage\u0022:\u0022none\u0022,\u0022backgroundPosition\u0022:\u0022center center\u0022,\u0022backgroundRepeat\u0022:\u0022no-repeat\u0022,\u0022backgroundSizeMode\u0022:\u0022cover\u0022,\u0022backgroundSize\u0022:\u0022cover\u0022,\u0022backgroundWidth\u0022:\u0022100px\u0022,\u0022backgroundHeight\u0022:\u0022100px\u0022,\u0022backgroundUrl\u0022:\u0022url()\u0022,\u0022backgroundColor\u0022:\u0022rgba( 0, 0, 0, 0 )\u0022,\u0022fieldBorderRadius\u0022:\u00223px\u0022,\u0022fieldBorderStyle\u0022:\u0022solid\u0022,\u0022fieldBorderSize\u0022:\u00221px\u0022,\u0022fieldBackgroundColor\u0022:\u0022var(\u002d\u002dtheme-palette-color-6, #F3F4F6)\u0022,\u0022fieldBorderColor\u0022:\u0022var(\u002d\u002dtheme-palette-color-10, #c1cbd4)\u0022,\u0022fieldTextColor\u0022:\u0022var(\u002d\u002dtheme-palette-color-3, #0F374E)\u0022,\u0022fieldMenuColor\u0022:\u0022#ffffff\u0022,\u0022labelSize\u0022:\u0022medium\u0022,\u0022labelColor\u0022:\u0022rgba( 0, 0, 0, 0.85 )\u0022,\u0022labelSublabelColor\u0022:\u0022rgba( 0, 0, 0, 0.55 )\u0022,\u0022labelErrorColor\u0022:\u0022#d63637\u0022,\u0022buttonSize\u0022:\u0022large\u0022,\u0022buttonBorderStyle\u0022:\u0022none\u0022,\u0022buttonBorderSize\u0022:\u00221px\u0022,\u0022buttonBorderRadius\u0022:\u00223px\u0022,\u0022buttonBackgroundColor\u0022:\u0022var(\u002d\u002dtheme-palette-color-1, #00B878)\u0022,\u0022buttonTextColor\u0022:\u0022#ffffff\u0022,\u0022buttonBorderColor\u0022:\u0022#066aab\u0022,\u0022pageBreakColor\u0022:\u0022#066aab\u0022,\u0022containerPadding\u0022:\u00220px\u0022,\u0022containerBorderStyle\u0022:\u0022none\u0022,\u0022containerBorderWidth\u0022:\u00221px\u0022,\u0022containerBorderColor\u0022:\u0022#000000\u0022,\u0022containerBorderRadius\u0022:\u00223px\u0022,\u0022containerShadowSize\u0022:\u0022none\u0022,\u0022customCss\u0022:\u0022\u0022}","fieldBackgroundColor":"var(\u002d\u002dtheme-palette-color-6, #F3F4F6)","fieldBorderColor":"var(\u002d\u002dtheme-palette-color-10, #c1cbd4)","fieldTextColor":"var(\u002d\u002dtheme-palette-color-3, #0F374E)","buttonSize":"large","buttonBackgroundColor":"var(\u002d\u002dtheme-palette-color-1, #00B878)"} /--></div></div>
<!-- /wp:kadence/tab --></div></div></div>
<!-- /wp:kadence/tabs --></div></div>
<!-- /wp:kadence/column --></div></div>
<!-- /wp:kadence/column -->Expand
You can copy paste this code directly if using kadence Blocks.
3. Understanding the Tabs Part (WhatsApp, Phone, Form)
In this chat box you see we have Whatsapp, Phone and a Form button created with Kadence Tabs. When you add icon in Kadence Tabs, you have option ot disable the title and hence it will look like an icon button.
For simulating live chat I just created a contact form with WP Forms using their Leads Addons which makes it feels conversational. You can use any other forms but not sure how the form will look.
Customize the Form, add it into your Form Tab, leave Whatsapp and Phone call tab content blank.
Now we will need to make sure when we click on Whatsapp and phone call Icon, its not switching tab, instead it links to respective URLs, for that I used the JS which you see. Change the Highlited part as you need. Mkae sure to double check line 7,8,28,46.
Javascript to change tabs Default Action
<script>
document.addEventListener('DOMContentLoaded', function() {
function updateTabLinks(container) {
const tab1 = container.querySelector('#tab-tab1 a');
const tab2 = container.querySelector('#tab-tab2 a');
if (tab1) tab1.href = 'https://wa.me/494067555174';
if (tab2) tab2.href = 'tel:494067555174';
}
function handleTabClick(event) {
const target = event.currentTarget;
const href = target.getAttribute('href');
if (href) {
event.preventDefault();
window.location.href = href;
}
}
// Initial setup
updateTabLinks(document);
// Event delegation for main content
document.querySelector('#tab-tab1 a').addEventListener('click', handleTabClick);
document.querySelector('#tab-tab2 a').addEventListener('click', handleTabClick);
// MutationObserver to handle dynamic popup content
const popupContainer = document.getElementById('ct-popup-3127');
const observer = new MutationObserver(function(mutationsList) {
for (const mutation of mutationsList) {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
updateTabLinks(popupContainer);
const popupTab1 = popupContainer.querySelector('#tab-tab1 a');
const popupTab2 = popupContainer.querySelector('#tab-tab2 a');
if (popupTab1) popupTab1.addEventListener('click', handleTabClick);
if (popupTab2) popupTab2.addEventListener('click', handleTabClick);
}
}
});
observer.observe(popupContainer, { childList: true, subtree: true });
// Example trigger for the popup (you can replace this with your actual trigger)
document.querySelector('.chat-box').addEventListener('click', function() {
popupContainer.style.display = 'block';
updateTabLinks(popupContainer);
});
});
</script>Expand
4. Duplicate 2nd Popup
Now if everything is working fine, duplicate the second popup from Blokcsy Contnet Blocks area, and set this new popup to load after 3 seconds, Repeat after 1 days.
This will automatically load the opened chat box, on the first load of website daily.
Thing to double check
- Make sure Popup Backdrop Background is set to default which is none.
- Make sure to add some CSS on mobile if needed. (Not required if you used my codes)
Conclusion
You might need to adjust the CSS or JS according to your need but this is the approach I followed to achieve what I needed, if you still need help or something is not working, do comment and I will try to help and fix. I can also create a video tutorial if needed. Thanks
See you on the next one.
