{"id":5311,"date":"2023-02-24T15:44:33","date_gmt":"2023-02-24T15:44:33","guid":{"rendered":"https:\/\/www.leadshook.com\/help\/?p=5311"},"modified":"2024-02-14T11:39:46","modified_gmt":"2024-02-14T11:39:46","slug":"how-to-add-click-to-call-button","status":"publish","type":"post","link":"https:\/\/www.leadshook.com\/help\/how-to-add-click-to-call-button\/","title":{"rendered":"How to Add Click-to-Call Button"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>HTML5 includes a protocol for making an element clickable and opening the phone app and adding the number to call. This makes it very easy to add a Click-to-Call button in your Decision Tree. <\/p>\n\n\n\n<p>Take note, make sure to include target=&#8221;_blank&#8221; as this is the only way that this would work for IOS users.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The basic code<\/h2>\n\n\n\n<p>Simply copy the code below and add it to the body of your Decision Tree. Make sure to update the phone number and feel free to change the text as well.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"tel:123-456-7890\" target=\"_blank\"&gt;CLICK TO CALL&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Add an extension<\/h2>\n\n\n\n<p>If your phone number has an extension, simply add &#8220;p&#8221; and the extension number after the phone number as shown below<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"tel:123-456-7890p123\" target=\"_blank\"&gt;CLICK TO CALL&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Add country code<\/h2>\n\n\n\n<p>Country codes can be added by adding &#8220;+&#8221; together with the country code before the phone number as shown below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"tel:+1123-456-7890\" target=\"_blank\"&gt;123-456-7890&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Add CSS styling<\/h2>\n\n\n\n<p>You can also add CSS styling to your code to make it look like a button. Add an &#8220;id&#8221; and target the id for styling. You can check the sample below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style type=\"text\/css\"&gt;\n#click_to_call {\n  background-color: #2ea44f;\n  border: 1px solid rgba(27, 31, 35, .15);\n  border-radius: 6px;\n  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;\n  box-sizing: border-box;\n  color: #fff;\n  cursor: pointer;\n  display: inline-block;\n  font-family: -apple-system,system-ui,\"Segoe UI\",Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\";\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n  padding: 6px 16px;\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n}\n\n#click_to_call:hover {\n  background-color: #2c974b;\n}\n&lt;\/style&gt;\n&lt;p style=\"text-align: center;\"&gt;&lt;a href=\"tel:123-456-7890\" id=\"click_to_call\"&gt;CLICK TO CALL&lt;\/a&gt;&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1002\" height=\"402\" src=\"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-24-at-11.27.53-PM.png\" alt=\"\" class=\"wp-image-5312\"\/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction HTML5 includes a protocol for making an element clickable and opening the phone app and adding the number to call. This makes it very easy to add a Click-to-Call button in your Decision Tree. Take note, make sure to include target=&#8221;_blank&#8221; as this is the only way that this would work for IOS users. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,259,620],"tags":[53,887,467],"class_list":["post-5311","post","type-post","status-publish","format-standard","hentry","category-general","category-nodes","category-scripts","tag-call-to-action","tag-click-to-call","tag-how-to"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Add Click-to-Call Button - LeadsHook Knowledge Base<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.leadshook.com\/help\/how-to-add-click-to-call-button\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Click-to-Call Button - LeadsHook Knowledge Base\" \/>\n<meta property=\"og:description\" content=\"Introduction HTML5 includes a protocol for making an element clickable and opening the phone app and adding the number to call. This makes it very easy to add a Click-to-Call button in your Decision Tree. Take note, make sure to include target=&#8221;_blank&#8221; as this is the only way that this would work for IOS users. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.leadshook.com\/help\/how-to-add-click-to-call-button\/\" \/>\n<meta property=\"og:site_name\" content=\"LeadsHook Knowledge Base\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/leadshook\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-24T15:44:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-14T11:39:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-24-at-11.27.53-PM.png\" \/>\n<meta name=\"author\" content=\"Nik T\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@leadshook\" \/>\n<meta name=\"twitter:site\" content=\"@leadshook\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nik T\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-add-click-to-call-button\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-add-click-to-call-button\\\/\"},\"author\":{\"name\":\"Nik T\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#\\\/schema\\\/person\\\/4bfe37d814563cc729828b7055313f4d\"},\"headline\":\"How to Add Click-to-Call Button\",\"datePublished\":\"2023-02-24T15:44:33+00:00\",\"dateModified\":\"2024-02-14T11:39:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-add-click-to-call-button\\\/\"},\"wordCount\":175,\"publisher\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-add-click-to-call-button\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Screenshot-2023-02-24-at-11.27.53-PM.png\",\"keywords\":[\"call-to-action\",\"click to call\",\"how to\"],\"articleSection\":[\"General\",\"Nodes\",\"Scripts\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-add-click-to-call-button\\\/\",\"url\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-add-click-to-call-button\\\/\",\"name\":\"How to Add Click-to-Call Button - LeadsHook Knowledge Base\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-add-click-to-call-button\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-add-click-to-call-button\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Screenshot-2023-02-24-at-11.27.53-PM.png\",\"datePublished\":\"2023-02-24T15:44:33+00:00\",\"dateModified\":\"2024-02-14T11:39:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-add-click-to-call-button\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-add-click-to-call-button\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-add-click-to-call-button\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Screenshot-2023-02-24-at-11.27.53-PM.png\",\"contentUrl\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Screenshot-2023-02-24-at-11.27.53-PM.png\",\"width\":1002,\"height\":402},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-add-click-to-call-button\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add Click-to-Call Button\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#website\",\"url\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/\",\"name\":\"LeadsHook Knowledge Base\",\"description\":\"LeadsHook Training &amp; Technical Help\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#organization\",\"name\":\"LeadsHook\",\"url\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/leadshook-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/leadshook-logo.png\",\"width\":350,\"height\":83,\"caption\":\"LeadsHook\"},\"image\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/leadshook\\\/\",\"https:\\\/\\\/x.com\\\/leadshook\",\"https:\\\/\\\/www.linkedin.com\\\/showcase\\\/leadshook\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#\\\/schema\\\/person\\\/4bfe37d814563cc729828b7055313f4d\",\"name\":\"Nik T\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/48d53e68db0b1db1cd5c54a750130fb2ee0c663306ff1bd434373f1a368ef7a0?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/48d53e68db0b1db1cd5c54a750130fb2ee0c663306ff1bd434373f1a368ef7a0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/48d53e68db0b1db1cd5c54a750130fb2ee0c663306ff1bd434373f1a368ef7a0?s=96&d=mm&r=g\",\"caption\":\"Nik T\"},\"sameAs\":[\"http:\\\/\\\/www.LeadsHook.com\"],\"url\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/author\\\/nik\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Click-to-Call Button - LeadsHook Knowledge Base","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.leadshook.com\/help\/how-to-add-click-to-call-button\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Click-to-Call Button - LeadsHook Knowledge Base","og_description":"Introduction HTML5 includes a protocol for making an element clickable and opening the phone app and adding the number to call. This makes it very easy to add a Click-to-Call button in your Decision Tree. Take note, make sure to include target=&#8221;_blank&#8221; as this is the only way that this would work for IOS users. [&hellip;]","og_url":"https:\/\/www.leadshook.com\/help\/how-to-add-click-to-call-button\/","og_site_name":"LeadsHook Knowledge Base","article_publisher":"https:\/\/www.facebook.com\/leadshook\/","article_published_time":"2023-02-24T15:44:33+00:00","article_modified_time":"2024-02-14T11:39:46+00:00","og_image":[{"url":"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-24-at-11.27.53-PM.png","type":"","width":"","height":""}],"author":"Nik T","twitter_card":"summary_large_image","twitter_creator":"@leadshook","twitter_site":"@leadshook","twitter_misc":{"Written by":"Nik T","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.leadshook.com\/help\/how-to-add-click-to-call-button\/#article","isPartOf":{"@id":"https:\/\/www.leadshook.com\/help\/how-to-add-click-to-call-button\/"},"author":{"name":"Nik T","@id":"https:\/\/www.leadshook.com\/help\/#\/schema\/person\/4bfe37d814563cc729828b7055313f4d"},"headline":"How to Add Click-to-Call Button","datePublished":"2023-02-24T15:44:33+00:00","dateModified":"2024-02-14T11:39:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.leadshook.com\/help\/how-to-add-click-to-call-button\/"},"wordCount":175,"publisher":{"@id":"https:\/\/www.leadshook.com\/help\/#organization"},"image":{"@id":"https:\/\/www.leadshook.com\/help\/how-to-add-click-to-call-button\/#primaryimage"},"thumbnailUrl":"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-24-at-11.27.53-PM.png","keywords":["call-to-action","click to call","how to"],"articleSection":["General","Nodes","Scripts"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.leadshook.com\/help\/how-to-add-click-to-call-button\/","url":"https:\/\/www.leadshook.com\/help\/how-to-add-click-to-call-button\/","name":"How to Add Click-to-Call Button - LeadsHook Knowledge Base","isPartOf":{"@id":"https:\/\/www.leadshook.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.leadshook.com\/help\/how-to-add-click-to-call-button\/#primaryimage"},"image":{"@id":"https:\/\/www.leadshook.com\/help\/how-to-add-click-to-call-button\/#primaryimage"},"thumbnailUrl":"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-24-at-11.27.53-PM.png","datePublished":"2023-02-24T15:44:33+00:00","dateModified":"2024-02-14T11:39:46+00:00","breadcrumb":{"@id":"https:\/\/www.leadshook.com\/help\/how-to-add-click-to-call-button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.leadshook.com\/help\/how-to-add-click-to-call-button\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.leadshook.com\/help\/how-to-add-click-to-call-button\/#primaryimage","url":"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-24-at-11.27.53-PM.png","contentUrl":"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-24-at-11.27.53-PM.png","width":1002,"height":402},{"@type":"BreadcrumbList","@id":"https:\/\/www.leadshook.com\/help\/how-to-add-click-to-call-button\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.leadshook.com\/help\/"},{"@type":"ListItem","position":2,"name":"How to Add Click-to-Call Button"}]},{"@type":"WebSite","@id":"https:\/\/www.leadshook.com\/help\/#website","url":"https:\/\/www.leadshook.com\/help\/","name":"LeadsHook Knowledge Base","description":"LeadsHook Training &amp; Technical Help","publisher":{"@id":"https:\/\/www.leadshook.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.leadshook.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.leadshook.com\/help\/#organization","name":"LeadsHook","url":"https:\/\/www.leadshook.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.leadshook.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2018\/12\/leadshook-logo.png","contentUrl":"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2018\/12\/leadshook-logo.png","width":350,"height":83,"caption":"LeadsHook"},"image":{"@id":"https:\/\/www.leadshook.com\/help\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/leadshook\/","https:\/\/x.com\/leadshook","https:\/\/www.linkedin.com\/showcase\/leadshook\/"]},{"@type":"Person","@id":"https:\/\/www.leadshook.com\/help\/#\/schema\/person\/4bfe37d814563cc729828b7055313f4d","name":"Nik T","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/48d53e68db0b1db1cd5c54a750130fb2ee0c663306ff1bd434373f1a368ef7a0?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/48d53e68db0b1db1cd5c54a750130fb2ee0c663306ff1bd434373f1a368ef7a0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/48d53e68db0b1db1cd5c54a750130fb2ee0c663306ff1bd434373f1a368ef7a0?s=96&d=mm&r=g","caption":"Nik T"},"sameAs":["http:\/\/www.LeadsHook.com"],"url":"https:\/\/www.leadshook.com\/help\/author\/nik\/"}]}},"_links":{"self":[{"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/posts\/5311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/comments?post=5311"}],"version-history":[{"count":8,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/posts\/5311\/revisions"}],"predecessor-version":[{"id":7008,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/posts\/5311\/revisions\/7008"}],"wp:attachment":[{"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/media?parent=5311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/categories?post=5311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/tags?post=5311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}