{"id":230,"date":"2019-09-12T16:54:56","date_gmt":"2019-09-12T11:24:56","guid":{"rendered":"http:\/\/holithemes.com\/plugins\/click-to-chat\/?p=230"},"modified":"2025-05-12T16:03:42","modified_gmt":"2025-05-12T10:33:42","slug":"style-1","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click-to-chat\/style-1\/","title":{"rendered":"Style-1"},"content":{"rendered":"\n<h5 class=\"wp-block-heading\">Theme-Friendly WhatsApp Button<\/h5>\n\n\n\n<p>Style 1 gives us a clean, customizable WhatsApp chat button that fits naturally into our website\u2019s theme and design.<\/p>\n\n\n<div  data-pre_filled=\"Hello, HoliThemes!\r\nLike to know more information about &#039;Style-1&#039; https:\/\/holithemes.com\/plugins\/click-to-chat\/style-1\/\" data-style=\"1\" style=\"display: inline; cursor: pointer; z-index: 99999999; \" class=\"ht-ctc-sc ht-ctc-sc-chat sc-style-1 ht-ctc-inline\">\n    <button  class=\"ctc-analytics\" style=\"display:flex; align-items:center;\">\n        <svg style=\"margin-right:6px;\" height=\"16\" version=\"1.1\" viewBox=\"0 0 509 512\" width=\"16\">\n        <g fill=\"none\" fill-rule=\"evenodd\" id=\"Page-1\" stroke=\"none\" stroke-width=\"1\">\n            <path style=\"fill: #ffffff;\" d=\"M259.253137,0.00180389396 C121.502859,0.00180389396 9.83730687,111.662896 9.83730687,249.413175 C9.83730687,296.530232 22.9142299,340.597122 45.6254897,378.191325 L0.613226597,512.001804 L138.700183,467.787757 C174.430395,487.549184 215.522926,498.811168 259.253137,498.811168 C396.994498,498.811168 508.660049,387.154535 508.660049,249.415405 C508.662279,111.662896 396.996727,0.00180389396 259.253137,0.00180389396 L259.253137,0.00180389396 Z M259.253137,459.089875 C216.65782,459.089875 176.998957,446.313956 143.886359,424.41206 L63.3044195,450.21808 L89.4939401,372.345171 C64.3924908,337.776609 49.5608297,295.299463 49.5608297,249.406486 C49.5608297,133.783298 143.627719,39.7186378 259.253137,39.7186378 C374.871867,39.7186378 468.940986,133.783298 468.940986,249.406486 C468.940986,365.025215 374.874096,459.089875 259.253137,459.089875 Z M200.755924,146.247066 C196.715791,136.510165 193.62103,136.180176 187.380228,135.883632 C185.239759,135.781068 182.918689,135.682963 180.379113,135.682963 C172.338979,135.682963 164.002301,138.050856 158.97889,143.19021 C152.865178,149.44439 137.578667,164.09322 137.578667,194.171258 C137.578667,224.253755 159.487251,253.321759 162.539648,257.402027 C165.600963,261.477835 205.268745,324.111057 266.985579,349.682963 C315.157262,369.636141 329.460495,367.859106 340.450462,365.455539 C356.441543,361.9639 376.521811,350.186865 381.616571,335.917077 C386.711331,321.63837 386.711331,309.399797 385.184018,306.857991 C383.654475,304.305037 379.578667,302.782183 373.464955,299.716408 C367.351242,296.659552 337.288812,281.870254 331.68569,279.83458 C326.080339,277.796676 320.898622,278.418749 316.5887,284.378615 C310.639982,292.612729 304.918689,301.074268 300.180674,306.09099 C296.46161,310.02856 290.477218,310.577055 285.331175,308.389764 C278.564174,305.506821 259.516237,298.869139 236.160607,278.048627 C217.988923,261.847958 205.716906,241.83458 202.149458,235.711949 C198.582011,229.598236 201.835077,225.948292 204.584241,222.621648 C207.719135,218.824546 210.610997,216.097679 213.667853,212.532462 C216.724709,208.960555 218.432625,207.05866 220.470529,202.973933 C222.508433,198.898125 221.137195,194.690767 219.607652,191.629452 C218.07588,188.568136 205.835077,158.494558 200.755924,146.247066 Z\" \n            fill=\"#ffffff\" id=\"htwaicon-chat-sc\"\/>\n        <\/g>\n        <\/svg>\n        <span class=\"ctc_cta\">WhatsApp us<\/span>\n    <\/button>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">To Apply Style 1<\/h5>\n\n\n\n<p>Navigate to <strong>Click to Chat<\/strong> &#8211; <strong>Style, Position<\/strong>, Select <strong>Style 1<\/strong>, and click Save.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"593\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/Style-1-1024x593.webp\" alt=\"\" class=\"wp-image-5892\" style=\"width:829px;height:auto\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/Style-1-1024x593.webp 1024w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/Style-1-300x174.webp 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/Style-1-768x445.webp 768w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/Style-1.webp 1135w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Customization<\/h3>\n\n\n\n<p>Navigate to <strong>&#8220;Click to Chat<\/strong>&#8221; -&gt; &#8220;<strong>Customize<\/strong>&#8221; &#8211; &#8220;<strong>style-1<\/strong>&#8221; to personalize the widget\u2019s appearance.<\/p>\n\n\n\n<p>Here, we can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set the <strong>Background Color.<\/strong><\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Change the <strong>Text Color<\/strong>.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add an WhatsApp preset icon directly inside the button. <\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"365\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/12\/image-1-1024x365.png\" alt=\"\" class=\"wp-image-1042\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/12\/image-1-1024x365.png 1024w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/12\/image-1-300x107.png 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/12\/image-1-768x274.png 768w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/12\/image-1.png 1311w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Style 1 on Mobile Devices<\/strong><\/h5>\n\n\n\n<p>we can either use the same style for both desktop and mobile, or apply a different style specifically for mobile.<\/p>\n\n\n\n<p>In the Customize section, when we enable Full Width on Mobile, it takes the highest priority\u2014stretching the button across the full width of the screen.<\/p>\n\n\n\n<p>In this mode:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>We can adjust the position from top or bottom<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Left and right position as no effect due to the full-width layout.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/11\/image-1024x572.png\" alt=\"\" class=\"wp-image-960\" style=\"width:1075px;height:auto\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/11\/image-1024x572.png 1024w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/11\/image-300x167.png 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/11\/image-768x429.png 768w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/11\/image.png 1175w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Mobile View &#8211; Full Width<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" width=\"485\" height=\"1024\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/full-width-mobile-485x1024.webp\" alt=\"\" class=\"wp-image-5331\" style=\"width:188px;height:auto\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/full-width-mobile-485x1024.webp 485w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/full-width-mobile-142x300.webp 142w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/full-width-mobile.webp 720w\" sizes=\"(max-width: 485px) 100vw, 485px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Style 1 is ideal for users seeking a clean, minimal WhatsApp button that integrates seamlessly with their website, perfect for those who prefer a simple, professional look.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<p>Style 8 provides a customizable, bold WhatsApp chat button that fits seamlessly into our website\u2019s theme, similar to Style 1. It offers more dynamic visual elements while maintaining a clean and professional appearance.<\/p>\n\n\n\n<p><a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/style-8\/\">Style &#8211; 8 Documentation<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Theme-Friendly WhatsApp Button Style 1 gives us a clean, customizable WhatsApp chat button that fits naturally into our website\u2019s theme and design. To Apply Style 1 Navigate to Click to Chat &#8211; Style, Position, Select Style 1, and click Save. Customization Navigate to &#8220;Click to Chat&#8221; -&gt; &#8220;Customize&#8221; &#8211; &#8220;style-1&#8221; to personalize the widget\u2019s appearance. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"right-sidebar","site-content-layout":"default","ast-site-content-layout":"normal-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","_htd2_assets":[]},"categories":[44],"tags":[],"class_list":["post-230","post","type-post","status-publish","format-standard","hentry","category-styles"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/comments?post=230"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/230\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/media?parent=230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/categories?post=230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/tags?post=230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}