{"id":242,"date":"2019-09-12T17:34:07","date_gmt":"2019-09-12T12:04:07","guid":{"rendered":"http:\/\/holithemes.com\/plugins\/click-to-chat\/?p=242"},"modified":"2025-05-12T16:07:22","modified_gmt":"2025-05-12T10:37:22","slug":"style-8","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click-to-chat\/style-8\/","title":{"rendered":"Style-8"},"content":{"rendered":"\n<h5 class=\"wp-block-heading\">The Materialized Chat Widget<\/h5>\n\n\n\n<p>Style 8 offers comprehensive customization for a WhatsApp button, allowing users to modify the text, icon, and button appearance to perfectly match their website\u2019s style.<\/p>\n\n\n\n<p><\/p>\n\n\n<div  data-pre_filled=\"Hello, HoliThemes!\r\nLike to know more information about &#039;Style-8&#039; https:\/\/holithemes.com\/plugins\/click-to-chat\/style-8\/\" data-style=\"8\" style=\"display: inline; cursor: pointer; z-index: 99999999; \" class=\"ht-ctc-sc ht-ctc-sc-chat sc-style-8 ht-ctc-inline\"><style>.ht-ctc-sc .ht-ctc-style-8 .s_8 svg{order:0;margin-right: 15px;}.ht-ctc-sc:hover svg g path{fill:#ffffff !important;}.ht-ctc-sc:hover .ht-ctc-s8-text{color:#ffffff !important;}.ht-ctc-sc:hover .ht-ctc-style-8 .s_8{box-shadow: 0 3px 3px 0 rgba(7,6,6,.14), 0 1px 7px 0 rgba(0,0,0,.12), 0 3px 1px -1px rgba(0,0,0,.2) !important; transition: .2s ease-out !important; background-color:#26a69a !important; }<\/style>\n  <div class=\"ht-ctc-style-8 ctc-analytics\" style=\"display: inline-block;  \" >\n    <span class=\"s_8 waves-effect waves-light ctc-analytics\" style=\"display: flex;padding: 0 2rem;letter-spacing: .5px;transition: .2s ease-out;text-align: center;justify-content: center;align-items: center;border-radius:2px;height:36px;line-height:36px;vertical-align:middle;box-shadow:0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2);box-sizing:inherit;background-color:#26a69a; \">\n      <svg style=\"display:block;\" height=\"16px\" version=\"1.1\" viewBox=\"0 0 509 512\" width=\"16px\">\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=\"ht-ctc-s8-text s8_span ctc-analytics ctc_cta\" style=\"color:#ffffff; font-size: 16px; \">\n        WhatsApp us\n      <\/span>\n    <\/span>\n  <\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">To Apply Style 8<\/h5>\n\n\n\n<p>Navigate to\u00a0<strong>Click to Chat<\/strong>\u00a0\u2013\u00a0<strong>Style, Position<\/strong>, Select\u00a0<strong>Style 8<\/strong>, and click Save.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"596\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/Style-8-1024x596.webp\" alt=\"\" class=\"wp-image-5939\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/Style-8-1024x596.webp 1024w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/Style-8-300x175.webp 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/Style-8-768x447.webp 768w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/Style-8.webp 1127w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Customization<\/h3>\n\n\n\n<p>Then navigate to \u201c<strong>Click to Chat<\/strong>\u201c-&gt; \u201c<strong>Customize<\/strong>\u201d \u2013 \u201c<strong>Style-8<\/strong>\u201d to personalize the widget\u2019s appearance.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"654\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/11\/style-8-1024x654.png\" alt=\"\" class=\"wp-image-940\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/11\/style-8-1024x654.png 1024w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/11\/style-8-300x191.png 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/11\/style-8-768x490.png 768w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/11\/style-8.png 1117w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Style-8 customization<\/figcaption><\/figure>\n\n\n\n<p><\/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>Text Color<\/strong>: Choose the color for the text on the button.<\/li>\n\n\n\n<li><strong>Text Color on Hover<\/strong>: Modify the text color when users hover over the button.<\/li>\n\n\n\n<li><strong>Background Color<\/strong>: Set the background color for the button.<\/li>\n\n\n\n<li><strong>Background Color on Hover<\/strong>: Change the background color when the button is hovered over.<\/li>\n\n\n\n<li><strong>Icon Color<\/strong>: Select the color for the WhatsApp icon.<\/li>\n\n\n\n<li><strong>Icon Color on Hover<\/strong>: Adjust the icon color when hovered over.<\/li>\n\n\n\n<li><strong>Icon Position<\/strong>: Set the position of the icon relative to the text (left or right).<\/li>\n\n\n\n<li><strong>Text Size<\/strong>: Customize the font size of the button text.<\/li>\n\n\n\n<li><strong>Icon Size<\/strong>: Adjust the size of the WhatsApp icon.<\/li>\n\n\n\n<li><strong>Button Size<\/strong>: Set the overall size of the button.<\/li>\n\n\n\n<li><strong>Full Width on Mobile<\/strong>: Enable the button to stretch across the full width of the screen on mobile devices.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Full Width Button on Mobile:<\/h5>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"706\" height=\"105\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/11\/image-2.png\" alt=\"\" class=\"wp-image-966\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/11\/image-2.png 706w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/11\/image-2-300x45.png 300w\" sizes=\"(max-width: 706px) 100vw, 706px\" \/><\/figure>\n\n\n\n<p>After checking that box, we can adjust the position; However, since Full Width on Mobile is enabled, we can&#8217;t add margins to the right or left.<\/p>\n\n\n\n<p>Instead, we can adjust the padding on the right and bottom.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"609\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/11\/image-1-1024x609.png\" alt=\"\" class=\"wp-image-963\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/11\/image-1-1024x609.png 1024w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/11\/image-1-300x178.png 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/11\/image-1-768x457.png 768w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/11\/image-1.png 1167w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Style 8 is perfect for those seeking a fully customizable WhatsApp button, offering flexibility in text, icon, and button settings, and ensuring a responsive design across all devices.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Materialized Chat Widget Style 8 offers comprehensive customization for a WhatsApp button, allowing users to modify the text, icon, and button appearance to perfectly match their website\u2019s style. To Apply Style 8 Navigate to\u00a0Click to Chat\u00a0\u2013\u00a0Style, Position, Select\u00a0Style 8, and click Save. Customization Then navigate to \u201cClick to Chat\u201c-&gt; \u201cCustomize\u201d \u2013 \u201cStyle-8\u201d to personalize [&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-242","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\/242","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=242"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/242\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/media?parent=242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/categories?post=242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/tags?post=242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}