{"id":156,"date":"2019-09-11T06:07:41","date_gmt":"2019-09-11T06:07:41","guid":{"rendered":"http:\/\/holithemes.com\/plugins\/click-to-chat\/?p=156"},"modified":"2025-05-16T12:22:18","modified_gmt":"2025-05-16T06:52:18","slug":"position-to-place","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click-to-chat\/position-to-place\/","title":{"rendered":"Position To Place"},"content":{"rendered":"\n<p>Customize where the WhatsApp icon appears on our website using the \u201cPosition to Place\u201d feature. This setting allows us to place the button at any desired position on both desktop and mobile devices using simple controls.<\/p>\n\n\n\n<p>Navigate to <strong>&#8220;Click to Chat<\/strong>&#8221; &#8211; <strong>&#8220;Style, Position<\/strong>&#8221; &#8211; <strong>&#8220;Position to Place<\/strong>&#8220;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"928\" height=\"848\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/pop1.png\" alt=\"\" class=\"wp-image-3689\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/pop1.png 928w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/pop1-300x274.png 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/pop1-768x702.png 768w\" sizes=\"(max-width: 928px) 100vw, 928px\" \/><figcaption class=\"wp-element-caption\">same settings for Mobile and Desktop devices<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Default Behavior<\/h4>\n\n\n\n<p>By default, the same position settings apply to both Desktop and Mobile devices. we can choose the location by setting values for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Top \/ Bottom<\/li>\n\n\n\n<li>Left \/ Right<\/li>\n<\/ul>\n\n\n\n<p>We can enter values using:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pixels (e.g., <code>10px<\/code>)<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Percentages (e.g., <code>50%<\/code>)<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Other CSS units (e.g., <code>2rem<\/code>, <code>5vh<\/code>, etc.)<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>By default, both mobile and desktop devices have the same settings. Because the Checkbox(Mobile and Desktop same Setting) is checked.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"935\" height=\"645\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-17.png\" alt=\"\" class=\"wp-image-3692\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-17.png 935w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-17-300x207.png 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-17-768x530.png 768w\" sizes=\"(max-width: 935px) 100vw, 935px\" \/><figcaption class=\"wp-element-caption\">The same settings will be applied to Desktop and Mobile devices<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading has-ast-global-color-8-color has-text-color\">Different positions for Mobile, Desktop devices<\/h4>\n\n\n\n<p>If we want to display the WhatsApp icon in different positions on Desktop and Mobile devices:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Uncheck the option: &#8220;Mobile and Desktop same settings&#8221;<\/li>\n\n\n\n<li>Set the positions separately for each device type.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading has-ast-global-color-8-color has-text-color\">Position to Place for Desktop:<\/h4>\n\n\n\n<p>Desktop: Bottom-Left corner<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"525\" height=\"656\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-18.png\" alt=\"\" class=\"wp-image-3693\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-18.png 525w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-18-240x300.png 240w\" sizes=\"(max-width: 525px) 100vw, 525px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>WhatsApp Widget appears at the bottom-left of the web page.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-19-1024x486.png\" alt=\"\" class=\"wp-image-3694\" style=\"width:1023px;height:485px\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-19-1024x486.png 1024w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-19-300x142.png 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-19-768x364.png 768w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-19.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading has-ast-global-color-8-color has-text-color\">Position to Place for Mobile:<\/h4>\n\n\n\n<p>Mobile: Top-Right corner<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"524\" height=\"640\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-20.png\" alt=\"\" class=\"wp-image-3695\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-20.png 524w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-20-246x300.png 246w\" sizes=\"(max-width: 524px) 100vw, 524px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p> WhatsApp Widget appears at the top-right of the web page.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" width=\"461\" height=\"1024\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-21-461x1024.jpg\" alt=\"\" class=\"wp-image-3696\" style=\"width:245px;height:auto\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-21-461x1024.jpg 461w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-21-135x300.jpg 135w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-21-768x1707.jpg 768w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-21-691x1536.jpg 691w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-21-922x2048.jpg 922w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/11\/Untitled-21.jpg 1080w\" sizes=\"(max-width: 461px) 100vw, 461px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading has-ast-global-color-8-color has-text-color\">Center the WhatsApp Icon (Example)<\/h4>\n\n\n\n<p>To place the icon at the horizontal center of the screen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set <strong>Bottom<\/strong>: <code>10px<\/code><\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set <strong>Right<\/strong>: <code>50%<\/code><\/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=\"935\" height=\"677\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/12\/image-7.png\" alt=\"\" class=\"wp-image-2474\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/12\/image-7.png 935w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/12\/image-7-300x217.png 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/12\/image-7-768x556.png 768w\" sizes=\"(max-width: 935px) 100vw, 935px\" \/><\/figure>\n\n\n\n<p><\/p>\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=\"pro_block\">Fixed and Absolute Positioning<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Fixed Position (Default)<\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The icon stays in the same spot on the screen even when scrolling.<\/li>\n\n\n\n<li>Best for consistent visibility.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Absolute Position (<a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/pricing\/\" data-type=\"link\" data-id=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/pricing\/\">PRO<\/a> only)<\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The icon is placed relative to the page content (<code>&lt;body&gt;<\/code> tag).<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It scrolls along with the content.<\/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=\"765\" height=\"521\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/12\/image-10.png\" alt=\"\" class=\"wp-image-2477\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/12\/image-10.png 765w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/12\/image-10-300x204.png 300w\" sizes=\"(max-width: 765px) 100vw, 765px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading has-ast-global-color-8-color has-text-color\">Fixed Vs Absolute Position Types<\/h4>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" autoplay controls loop src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/fixed-and-absolute-9.mp4\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"inherit-container-width wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\"><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>This flexible positioning system helps us perfectly align the WhatsApp chat button with our website\u2019s layout and user experience.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Related Links<\/h4>\n\n\n\n<p><a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/list-of-styles\/\">List of Styles<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/select-styles\/\">Select Styles (Widgets)<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Customize where the WhatsApp icon appears on our website using the \u201cPosition to Place\u201d feature. This setting allows us to place the button at any desired position on both desktop and mobile devices using simple controls. Navigate to &#8220;Click to Chat&#8221; &#8211; &#8220;Style, Position&#8221; &#8211; &#8220;Position to Place&#8220; Default Behavior By default, the same position [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","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":[56,63],"tags":[],"class_list":["post-156","post","type-post","status-publish","format-standard","hentry","category-click-to-chat","category-display-settings"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/156","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\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/comments?post=156"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/156\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/media?parent=156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/categories?post=156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/tags?post=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}