{"id":1260,"date":"2021-03-26T13:03:04","date_gmt":"2021-03-26T07:33:04","guid":{"rendered":"http:\/\/holithemes.com\/plugins\/click-to-chat\/?p=1260"},"modified":"2025-08-28T12:44:02","modified_gmt":"2025-08-28T07:14:02","slug":"custom-element","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click-to-chat\/custom-element\/","title":{"rendered":"Custom Element &#8211; Add Your Own Design"},"content":{"rendered":"\n<p>Create an element\/design and assign the class or ID <code>ctc_chat<\/code>.<\/p>\n\n\n\n<p>Use <code>#ctc_chat<\/code> as the <code>href<\/code> attribute in a link to navigate to WhatsApp with the plugin&#8217;s settings (WhatsApp Number, Pre-Filled Message).<\/p>\n\n\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading has-ast-global-color-8-color has-text-color\" id=\"class-name-ctc-chat\"><strong>Class Name: ctc_chat<\/strong><\/h4>\n\n\n\n<p>To navigate to WhatsApp with the plugin\u2019s settings (WhatsApp Number, Pre-Filled Message), add the class name <code><strong>ctc_chat<\/strong><\/code> to any element\/design<\/p>\n\n\n\n<p><strong>How to Add Class Name to any element from the WordPress Default Editor:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Select the block<\/strong> you want to apply the class to.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to the <strong>right sidebar<\/strong> and select the <strong>\u2018Block\u2019<\/strong> tab.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the <strong>\u2018Advanced option\u2019<\/strong> section, under <strong>\u2018Additional CSS class(es)\u2019<\/strong>, enter the class name <code>ctc_chat<\/code>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"360\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/03\/image-3-1024x360.png\" alt=\"\" class=\"wp-image-1276\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/03\/image-3-1024x360.png 1024w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/03\/image-3-300x106.png 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/03\/image-3-768x270.png 768w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/03\/image-3-1536x540.png 1536w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/03\/image-3.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Add class name as \u201cctc_chat\u201d&nbsp;<\/figcaption><\/figure>\n\n\n\n<p class=\"ctc_chat\"><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The Below Button is created using &#8220;<strong>ctc_chat<\/strong>&#8221; class name<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-buttons ctc_chat is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button ctc-chat\"><a class=\"wp-block-button__link wp-element-button\" rel=\"ctc-chat\">WhatsApp Us<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading has-ast-global-color-8-color has-text-color\" id=\"href-attributelink-ctc-chat\"><strong>Href attribute\/Link: #ctc_chat<\/strong><\/h4>\n\n\n\n<p>To navigate to WhatsApp when a user clicks on any element, add the href\/link attribute as <strong><code>#ctc_chat<\/code>.<\/strong><\/p>\n\n\n\n<p><strong>How to add href value to any element:<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Step-1:<\/strong> Add the desired element or design (e.g., a button).&nbsp;&nbsp;<\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"551\" height=\"154\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/03\/image-4.png\" alt=\"\" class=\"wp-image-1277\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/03\/image-4.png 551w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/03\/image-4-300x84.png 300w\" sizes=\"(max-width: 551px) 100vw, 551px\" \/><figcaption class=\"wp-element-caption\">Add button<\/figcaption><\/figure>\n\n\n\n<p><strong>Step-2:<\/strong> &nbsp;Add&nbsp;href\/link attribute as <strong>&#8220;#ctc_chat.\u201d&nbsp;<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the block or content where you want the link.<\/li>\n\n\n\n<li>Click on the link icon and enter <code><strong>#ctc_chat<\/strong><\/code> as the link.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"818\" height=\"368\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/03\/href-Attribute-1.webp\" alt=\"\" class=\"wp-image-5465\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/03\/href-Attribute-1.webp 818w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/03\/href-Attribute-1-300x135.webp 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/03\/href-Attribute-1-768x346.webp 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><figcaption class=\"wp-element-caption\">Add href\/link attribute as &#8220;#ctc_chat&#8221;<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The Below button is created using &#8221; <strong>#ctc-chat<\/strong> &#8220;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"#ctc-chat\" target=\"_blank\" rel=\"noreferrer noopener\">WhatsApp Us<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Update the post, now when the user clicks on any element that has \u2018ctc_chat\u2019 class name or \u2018#ctc_chat\u2019&nbsp;href\/link, the plugin navigates to WhatsApp based on plugin settings.<\/p>\n\n\n\n<h4 class=\"wp-block-heading add_whatsapp_in_menu has-ast-global-color-8-color has-text-color\"><strong>Add WhatsApp to the Menu<\/strong><\/h4>\n\n\n\n<p>To add WhatsApp to&nbsp;the menu,&nbsp;add&nbsp;href\/URL as&nbsp;\u201c#ctc_chat\u201d&nbsp;to the menu item.&nbsp;<\/p>\n\n\n\n<p>Select Custom Links menu&nbsp;item&nbsp;and add #ctc_chat at URL and add Link Text.&nbsp;<\/p>\n\n\n\n<p><strong>&#8220;WordPress Dashboard<\/strong>&#8221; -&gt; &#8220;<strong>Appearances<\/strong>&#8221; -&gt; &#8220;<strong>Menus&#8221;<\/strong> -&gt;<strong> &#8220;Custom Links<\/strong>&#8221;&nbsp;-&gt; &#8220;<strong>Add to Menu<\/strong>&#8220;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"581\" height=\"537\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/04\/Custom-link.png\" alt=\"\" class=\"wp-image-1337\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/04\/Custom-link.png 581w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/04\/Custom-link-300x277.png 300w\" sizes=\"(max-width: 581px) 100vw, 581px\" \/><figcaption class=\"wp-element-caption\">Custom Links<\/figcaption><\/figure>\n\n\n\n<p>After Add&nbsp;to Menu, Save the Menu.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"907\" height=\"705\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/04\/Menu-Structure.png\" alt=\"\" class=\"wp-image-1338\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/04\/Menu-Structure.png 907w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/04\/Menu-Structure-300x233.png 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/04\/Menu-Structure-768x597.png 768w\" sizes=\"(max-width: 907px) 100vw, 907px\" \/><figcaption class=\"wp-element-caption\">Menu Structure<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"257\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/04\/Menu-Post-1024x257.png\" alt=\"\" class=\"wp-image-1339\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/04\/Menu-Post-1024x257.png 1024w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/04\/Menu-Post-300x75.png 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/04\/Menu-Post-768x193.png 768w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/04\/Menu-Post-1536x385.png 1536w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/04\/Menu-Post.png 1790w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Menu Post<\/figcaption><\/figure>\n\n\n\n<p>If a user clicks on the WhatsApp Menu, it will navigate to WhatsApp based on plugin settings.&nbsp;<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity aligncenter\"\/>\n\n\n\n<p><a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/shortcodes-chat\/\" target=\"_blank\" rel=\"noreferrer noopener\">Chat&nbsp;Shortcodes<\/a>&nbsp;&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Create an element\/design and assign the class or ID ctc_chat. Use #ctc_chat as the href attribute in a link to navigate to WhatsApp with the plugin&#8217;s settings (WhatsApp Number, Pre-Filled Message). Class Name: ctc_chat To navigate to WhatsApp with the plugin\u2019s settings (WhatsApp Number, Pre-Filled Message), add the class name ctc_chat to any element\/design How [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","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":"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":[63,59],"tags":[21],"class_list":["post-1260","post","type-post","status-publish","format-standard","hentry","category-display-settings","category-page-level-settings","tag-3-3"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/1260","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=1260"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/1260\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/media?parent=1260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/categories?post=1260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/tags?post=1260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}