{"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":"2026-09-29T16:02:32","modified_gmt":"2026-09-29T10:32:32","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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">Navigate to\u00a0<strong>Click to Chat \u2192 General \u2192 Widget Style &amp; Position<\/strong>, then select the Desktop or Mobile position.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"552\" height=\"743\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/widget-stylepostion-desktopmoble.webp\" alt=\"\" class=\"wp-image-7574\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/widget-stylepostion-desktopmoble.webp 552w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/widget-stylepostion-desktopmoble-223x300.webp 223w\" sizes=\"(max-width: 552px) 100vw, 552px\" \/><figcaption class=\"wp-element-caption\">Widget Style and Position settings for Desktop and Mobile devices<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Default Behavior<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By default, mobile and desktop use the same settings because the <strong>Mobile and Desktop same settings<\/strong> switch is enabled.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"742\" height=\"334\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/09\/same_setting_on.webp\" alt=\"\" class=\"wp-image-7567\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/09\/same_setting_on.webp 742w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2020\/09\/same_setting_on-300x135.webp 300w\" sizes=\"(max-width: 742px) 100vw, 742px\" \/><figcaption class=\"wp-element-caption\">The same settings will be applied to Desktop and Mobile devices<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/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 class=\"wp-block-paragraph\">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>Turn off the <strong>Mobile and Desktop same settings<\/strong> switch<\/li>\n\n\n\n<li>Set the positions separately for each device type.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/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 class=\"wp-block-paragraph\">Desktop: Bottom-Left corner<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"622\" height=\"824\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/pos-to-pa_desktop.webp\" alt=\"\" class=\"wp-image-7575\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/pos-to-pa_desktop.webp 622w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/pos-to-pa_desktop-226x300.webp 226w\" sizes=\"(max-width: 622px) 100vw, 622px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WhatsApp Widget appears at the bottom-left of the web page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/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 class=\"wp-block-paragraph\"><\/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 class=\"wp-block-paragraph\">Mobile: Top-Right corner<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"551\" height=\"745\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/pos-to-pla-mobile.webp\" alt=\"\" class=\"wp-image-7576\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/pos-to-pla-mobile.webp 551w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/pos-to-pla-mobile-222x300.webp 222w\" sizes=\"(max-width: 551px) 100vw, 551px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> WhatsApp Widget appears at the top-right of the web page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/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 class=\"wp-block-paragraph\"><\/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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"628\" height=\"826\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/center-the-whatsapp-icon.webp\" alt=\"\" class=\"wp-image-7577\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/center-the-whatsapp-icon.webp 628w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/center-the-whatsapp-icon-228x300.webp 228w\" sizes=\"(max-width: 628px) 100vw, 628px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h4 id=\"pro_block\" class=\"wp-block-heading has-ast-global-color-8-color has-text-color\">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 class=\"wp-block-paragraph\"><\/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 class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"626\" height=\"822\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/desktop-position-type.webp\" alt=\"\" class=\"wp-image-7578\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/desktop-position-type.webp 626w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2019\/09\/desktop-position-type-228x300.webp 228w\" sizes=\"(max-width: 626px) 100vw, 626px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/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 class=\"wp-block-paragraph\"><\/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-7387b849 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 class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Related Links<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/list-of-styles\/\">List of Styles<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><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\u00a0Click to Chat \u2192 General \u2192 Widget Style &amp; Position, then select the Desktop or Mobile position. Default [&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":1,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/156\/revisions"}],"predecessor-version":[{"id":7579,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/156\/revisions\/7579"}],"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}]}}