{"id":6097,"date":"2025-05-09T13:04:55","date_gmt":"2025-05-09T07:34:55","guid":{"rendered":"https:\/\/holithemes.com\/plugins\/click-to-chat\/?p=6097"},"modified":"2025-05-21T10:46:36","modified_gmt":"2025-05-21T05:16:36","slug":"different-settings-for-mobile-and-desktop","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click-to-chat\/different-settings-for-mobile-and-desktop\/","title":{"rendered":"How to set Different Settings for Mobile and Desktop"},"content":{"rendered":"\n<p>To apply Different Settings for Mobile and Desktop simply uncheck the \u201cMobile and Desktop: Same Settings\u201d option in the Style, Position settings. This allows us to set separate styles, positions, URLs, greeting dialog behavior (Preset), and control widget visibility per device.<\/p>\n\n\n\n<p>Navigate to &#8220;<strong>Click to Chat<\/strong>&#8221; &#8211; &#8220;<strong>Style, Position<\/strong>&#8221; settings and scroll to the Check box<\/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=\"881\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/05\/Mobile-Desktop-Same-Settings-1024x881.webp\" alt=\"Different Settings for Mobile and Desktop\" class=\"wp-image-6098\" style=\"width:678px;height:auto\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/05\/Mobile-Desktop-Same-Settings-1024x881.webp 1024w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/05\/Mobile-Desktop-Same-Settings-300x258.webp 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/05\/Mobile-Desktop-Same-Settings-768x661.webp 768w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/05\/Mobile-Desktop-Same-Settings-1536x1321.webp 1536w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/05\/Mobile-Desktop-Same-Settings-2048x1762.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Now Navigate to <strong>Click to Chat<\/strong> \u2192 <strong>Style, Position<\/strong> &#8211; Select Style (Mobile). By <strong>uncheck<\/strong> this option we can now set different options<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"492\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/05\/Mobile-Settings-1024x492.webp\" alt=\"\" class=\"wp-image-6099\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/05\/Mobile-Settings-1024x492.webp 1024w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/05\/Mobile-Settings-300x144.webp 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/05\/Mobile-Settings-768x369.webp 768w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/05\/Mobile-Settings-1536x737.webp 1536w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2025\/05\/Mobile-Settings-2048x983.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>1. Styles<\/strong><\/h4>\n\n\n\n<p>We can assign separate styles for mobile and desktop. For example, we can set one style for desktop and another style for mobile based on our design preference.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2. Position<\/strong><\/h4>\n\n\n\n<p>Control the positioning of the widget separately for mobile and desktop.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set the widget to appear at the bottom-right on desktop<\/li>\n\n\n\n<li>And at the bottom-left on mobile (or adjust margins as needed)<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>3. URL Structure<\/strong><\/h4>\n\n\n\n<p>We can assign different WhatsApp numbers or URLs for desktop and mobile.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Desktop URL: Open WhatsApp Web<\/li>\n\n\n\n<li>Mobile URL: Open WhatsApp App<\/li>\n<\/ul>\n\n\n\n<p>This allows us to craft platform-optimized experiences or route chats to different agents based on device.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>4. Greeting Dialog Behavior<\/strong><\/h4>\n\n\n\n<p>The Greeting Dialog can be controlled based on the user\u2019s device and interaction.<\/p>\n\n\n\n<p>When we set the initial stage of the greeting dialog to Preset:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It will be open on desktop by default<\/li>\n\n\n\n<li>It will be closed on mobile by default<\/li>\n<\/ul>\n\n\n\n<p>This behavior adjusts dynamically based on user interactions, such as scrolling or clicking the widget.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>5. Display Conditions: Show or Hide Widget<\/strong><\/h4>\n\n\n\n<p>We can choose to display or hide the widget on specific devices:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hide on desktop, show on mobile<\/li>\n\n\n\n<li>Hide on mobile, show on desktop<\/li>\n<\/ul>\n\n\n\n<p>This is useful when we want to offer chat support only on mobile or during specific testing or campaign periods.<\/p>\n\n\n\n<p>By using device-specific settings, we can deliver a more targeted and user-friendly WhatsApp chat experience. This flexibility ensures the widget looks and behaves appropriately across devices, helping improve engagement and usability.<\/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\"><strong>Explore More Display Options<\/strong><\/h4>\n\n\n\n<p><a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/hide-based-on-device\/\" data-type=\"link\" data-id=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/hide-based-on-device\/\">Hide based on Device<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/show-hide-on-mobile-desktop\/\" data-type=\"link\" data-id=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/show-hide-on-mobile-desktop\/\">Enable or Disable Chat widget Based on Viewing Device (Mobile\/Desktop)<br><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To apply Different Settings for Mobile and Desktop simply uncheck the \u201cMobile and Desktop: Same Settings\u201d option in the Style, Position settings. This allows us to set separate styles, positions, URLs, greeting dialog behavior (Preset), and control widget visibility per device. Navigate to &#8220;Click to Chat&#8221; &#8211; &#8220;Style, Position&#8221; settings and scroll to the Check [&hellip;]<\/p>\n","protected":false},"author":9,"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":[63],"tags":[],"class_list":["post-6097","post","type-post","status-publish","format-standard","hentry","category-display-settings"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/6097","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/comments?post=6097"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/6097\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/media?parent=6097"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/categories?post=6097"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/tags?post=6097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}