{"id":4739,"date":"2024-10-10T10:53:10","date_gmt":"2024-10-10T05:23:10","guid":{"rendered":"https:\/\/holithemes.com\/plugins\/click-to-chat\/?p=4739"},"modified":"2025-08-06T17:11:12","modified_gmt":"2025-08-06T11:41:12","slug":"custom-css","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click-to-chat\/custom-css\/","title":{"rendered":"Add Custom CSS Code for Click to Chat plugin"},"content":{"rendered":"\n<p>The Click to Chat plugin offers full customization through its settings panel, allowing users to adjust the button\u2019s color, size, padding, hover effects, position, and text. This ensures seamless integration with your website\u2019s design, providing flexible configurations to match your branding.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced Customization with CSS<\/h3>\n\n\n\n<p>If the default settings don\u2019t fully meet the website design requirements, we can enhance the widget\u2019s appearance by applying custom CSS. This offers more control, allowing us to style the widget according to your website\u2019s unique design.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">Custom CSS provides greater flexibility, enabling you to achieve a look beyond the default options.<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">How to Add Custom CSS<\/h3>\n\n\n\n<p>To apply custom CSS to the widget:<\/p>\n\n\n\n<p>Navigate to the <strong>&#8220;Click to Chat<\/strong>&#8221; <strong>&#8211;&gt;<\/strong> <strong>&#8220;Other Settings&#8221;<\/strong> settings.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"159\" height=\"154\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2024\/10\/Other-Settings-nav.webp\" alt=\"\" class=\"wp-image-6361\"\/><\/figure>\n\n\n\n<p>Scroll down to the <strong>Custom CSS<\/strong> section.<\/p>\n\n\n\n<p>Enter your custom CSS code in the provided field.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"942\" height=\"327\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2024\/10\/Screenshot-2024-12-11-101101.png\" alt=\"\" class=\"wp-image-4843\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2024\/10\/Screenshot-2024-12-11-101101.png 942w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2024\/10\/Screenshot-2024-12-11-101101-300x104.png 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2024\/10\/Screenshot-2024-12-11-101101-768x267.png 768w\" sizes=\"(max-width: 942px) 100vw, 942px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Examples of Codes<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">To Customize the Size of Greetings Close Button &nbsp;<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>.ctc_greetings_close_btn svg {\n&nbsp;&nbsp;&nbsp;&nbsp;width: 25px !important;\n&nbsp;&nbsp;&nbsp;&nbsp;height: 25px !important;\n&nbsp;&nbsp;&nbsp;&nbsp;color: lightgray !important;\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">To add styles to the input in the greetings form<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>.\/* to add styles to the input in the greetings form *\/\n.ctc_g_form .ctc_form_field input {\n    border: 1px solid #ccc !important;\n    border-radius: 5px !important;\n    padding : 10px !important;\n};<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">To add styles to the label in the greetings form<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* to add styles to the label in the greetings form *\/\n.ctc_g_form .ctc_form_field label {\n    font-size: 16px;\n    font-weight: bold;\n};<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">To add styles to the number input in the greetings form<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* to add styles to the number input in the greetings form *\/\n.ctc_g_form .ctc_form_field .ctc_intl_number {\n   padding: 9px 9px 9px 47px !important;\n};<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"font-family-css\">To change the font family<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>.ht-ctc-chat {\n    font-family: 'Arial', sans-serif !important;\n}<\/code><\/pre>\n\n\n\n<p>We\u2019re Actively working on expanding our custom CSS examples. For help with styling the greetings form or other questions, Feel free to <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/support\/\">contact us.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Click to Chat plugin offers full customization through its settings panel, allowing users to adjust the button\u2019s color, size, padding, hover effects, position, and text. This ensures seamless integration with your website\u2019s design, providing flexible configurations to match your branding. Advanced Customization with CSS If the default settings don\u2019t fully meet the website design [&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":"default","site-content-layout":"","ast-site-content-layout":"default","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":"","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":[56,53],"tags":[],"class_list":["post-4739","post","type-post","status-publish","format-standard","hentry","category-click-to-chat","category-features"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/4739","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=4739"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/4739\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/media?parent=4739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/categories?post=4739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/tags?post=4739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}