{"id":368,"date":"2019-12-10T14:34:36","date_gmt":"2019-12-10T09:04:36","guid":{"rendered":"http:\/\/holithemes.com\/plugins\/click-to-chat\/?p=368"},"modified":"2026-09-22T15:45:11","modified_gmt":"2026-09-22T10:15:11","slug":"style-7","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click-to-chat\/style-7\/","title":{"rendered":"Style-7"},"content":{"rendered":"\n<h5 class=\"wp-block-heading\">A Customizable Icon with Padding<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Style 7 offers a fully customizable WhatsApp button with options to adjust the icon, background, and call-to-action (CTA) elements, allowing for a dynamic and engaging design.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<div  data-pre_filled=\"Hello, HoliThemes!\r\nLike to know more information about &#039;Style-7&#039; https:\/\/holithemes.com\/plugins\/click-to-chat\/style-7\/\" data-style=\"7\" style=\"display: inline; cursor: pointer; z-index: 99999999; \" class=\"ht-ctc-sc ht-ctc-sc-chat sc-style-7 ht-ctc-inline\"><style id=\"ht-ctc-sc-s7\">.ht-ctc-sc.sc-style-7:hover .ctc_s_7_icon_padding{background-color:#25d366 !important;}.ht-ctc-sc.sc-style-7:hover svg g path{fill:#f4f4f4 !important;}<\/style>\n    <div title = 'WhatsApp us' class=\"ctc_s_7 ctc-analytics\" style=\"display:inline-flex;justify-content:center;align-items:center;\">\n        <p class=\"ctc_s_7_cta ctc-analytics ctc_cta ht-ctc-cta  ht-ctc-cta-hover \" style=\"padding: 0px 16px;  color: #ffffff; background-color: #25d366; border-radius:10px; margin:0 10px;  display: none; order: 1; \">WhatsApp us<\/p>\n        <div class=\"ctc_s_7_icon_padding ctc-analytics \" style=\"display:inline-flex; font-size: 20px; color: #ffffff; padding: 12px; background-color: #25D366; border-radius: 50%;\">\n            <svg style=\"pointer-events:none; display:block; height:20px; width:20px;\" height=\"20px\" version=\"1.1\" viewBox=\"0 0 509 512\" width=\"20px\">\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        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">To Apply Style 7<\/h5>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <strong>Click to Chat \u2192 General \u2192 Widget Style &amp; Position<\/strong>.<\/li>\n\n\n\n<li>Select <strong>Desktop<\/strong> and choose <strong>Style 7<\/strong> from the style grid.<\/li>\n\n\n\n<li>Click <strong>Save<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"755\" height=\"686\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/12\/style-7-1.webp\" alt=\"\" class=\"wp-image-7438\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/12\/style-7-1.webp 755w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/12\/style-7-1-300x273.webp 300w\" sizes=\"(max-width: 755px) 100vw, 755px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We can use the same style for desktop and mobile. To choose a different style for mobile, turn off <strong>Mobile and Desktop same settings<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Customization<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Select <strong>Style 7<\/strong> in the <strong>style grid<\/strong>, then click the <strong>Customize brush icon<\/strong> that appears on the selected style. Edit its appearance and click <strong>Save<\/strong>. Saved changes apply wherever Style 7 is used.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"546\" height=\"1005\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/12\/style-7customize.webp\" alt=\"\" class=\"wp-image-7440\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/12\/style-7customize.webp 546w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/12\/style-7customize-163x300.webp 163w\" sizes=\"(max-width: 546px) 100vw, 546px\" \/><figcaption class=\"wp-element-caption\">Style-7 customization<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Key Features<\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Customize Icon Size<\/strong>: Adjust the size of the WhatsApp icon.<\/li>\n\n\n\n<li><strong>Icon Color<\/strong>: Set the color of the WhatsApp icon.<\/li>\n\n\n\n<li><strong>Icon Color on Hover<\/strong>: Change the icon color when users hover over the button.<\/li>\n\n\n\n<li><strong>Border Padding Size<\/strong>: Adjust the padding around the icon and button for balanced spacing.<\/li>\n\n\n\n<li><strong>Background Color<\/strong>: Choose a background color for the button.<\/li>\n\n\n\n<li><strong>Background Color on Hover<\/strong>: Set a different background color for the button when hovered over.<\/li>\n\n\n\n<li><strong>Border Radius<\/strong>: Modify the border radius for rounded or sharp corners.<\/li>\n\n\n\n<li><strong>Call to Action Options<\/strong>: Display the CTA on hover, show it permanently, or hide it.<\/li>\n\n\n\n<li><strong>CTA Text Customization<\/strong>: Customize the CTA text color, background color, and font size.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Style 7 offers a versatile and engaging WhatsApp button with complete control over icon size, color, and background, alongside customizable call-to-action features for a dynamic user experience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A Customizable Icon with Padding Style 7 offers a fully customizable WhatsApp button with options to adjust the icon, background, and call-to-action (CTA) elements, allowing for a dynamic and engaging design. To Apply Style 7 We can use the same style for desktop and mobile. To choose a different style for mobile, turn off Mobile [&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-368","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\/368","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=368"}],"version-history":[{"count":1,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/368\/revisions"}],"predecessor-version":[{"id":7441,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/368\/revisions\/7441"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/media?parent=368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/categories?post=368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/tags?post=368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}