Desktop traffic still accounts for a significant share of web visits, depending on your industry:<\/p>\n\n\n\n Even in mobile-dominated categories, desktop visitors represent high-value users: they are often researching, comparing, or making decisions before switching to mobile to complete the action.<\/p>\n\n\n\n Show a QR code on the desktop banner that the user scans with their phone:<\/p>\n\n\n\n Advantages:<\/strong><\/p>\n\n\n\n Disadvantages:<\/strong><\/p>\n\n\n\n Including deep link context in the QR code:<\/strong><\/p>\n\n\n\n When the user scans the QR code and installs the app, the deferred deep link resolves to the page they were viewing on desktop.<\/p>\n\n\n\n Ask the user for their phone number and send them a download link via SMS:<\/p>\n\n\n\n Advantages:<\/strong><\/p>\n\n\n\n Disadvantages:<\/strong><\/p>\n\n\n\n Send a download link to the user's email, which they can open on their phone:<\/p>\n\n\n\n Advantages:<\/strong><\/p>\n\n\n\n Disadvantages:<\/strong><\/p>\n\n\n\n If the user is logged into your website on desktop, you can push a notification to their mobile device (if they have already installed the app) or show a personalized prompt on their next mobile web visit:<\/p>\n\n\n\n This approach requires no additional PII and leverages the user's existing account.<\/p>\n\n\n\n Desktop banners work best as:<\/p>\n\n\n\n Avoid: floating overlays on desktop. They are more intrusive on desktop because they cover content the user is actively reading.<\/p>\n\n\n\n Desktop banners should be smaller relative to the viewport than mobile banners:<\/p>\n\n\n\n The QR code must be large enough to scan reliably but not so large that it dominates the banner. Minimum 80×80 pixels; recommended 100-120 pixels for banners, larger for sidebar widgets.<\/p>\n\n\n\n Not every desktop page needs an app banner. Show desktop banners when:<\/p>\n\n\n\n Do not show desktop banners when:<\/p>\n\n\n\n Tolinku's smart banners<\/a> support desktop display modes with QR code generation. Configure desktop-specific banner content in the Tolinku dashboard<\/a>, including QR codes that include the current page's deep link context for deferred deep linking after install.<\/p>\n\n\n\n For mobile banner strategies, see the smart banners guide<\/a>. For QR code deep linking, see QR codes for app deep linking<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Extend smart banners to desktop browsers. Use QR codes, SMS-to-phone, email-to-self, and cross-device strategies to drive mobile app installs from desktop traffic.<\/p>\n","protected":false},"author":2,"featured_media":1364,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Smart Banners on Desktop: Cross-Device Strategies","rank_math_description":"Extend smart banners to desktop browsers. Use QR codes, SMS, and cross-device strategies to drive mobile app installs from desktop traffic.","rank_math_focus_keyword":"smart banners desktop","rank_math_canonical_url":"","rank_math_facebook_title":"","rank_math_facebook_description":"","rank_math_facebook_image":"https:\/\/tolinku.com\/blog\/wp-content\/uploads\/2026\/03\/og-smart-banners-on-desktop.png","rank_math_facebook_image_id":"","rank_math_twitter_title":"","rank_math_twitter_description":"","rank_math_twitter_image":"https:\/\/tolinku.com\/blog\/wp-content\/uploads\/2026\/03\/og-smart-banners-on-desktop.png","footnotes":""},"categories":[16],"tags":[341,342,110,69,48,40,26,41],"class_list":["post-1365","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing","tag-cross-device","tag-desktop","tag-marketing","tag-mobile-development","tag-qr-codes","tag-smart-banners","tag-user-acquisition","tag-web-to-app"],"_links":{"self":[{"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/posts\/1365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/comments?post=1365"}],"version-history":[{"count":3,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/posts\/1365\/revisions"}],"predecessor-version":[{"id":2290,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/posts\/1365\/revisions\/2290"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/media\/1364"}],"wp:attachment":[{"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/media?parent=1365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/categories?post=1365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/tags?post=1365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Tolinku](\"https:\/\/tolinku.com\/blog\/wp-content\/uploads\/2026\/03\/screenshot-banner-form-preview-1772822964529.png\")
\nThe live banner preview showing how the banner appears on a mobile device.<\/em><\/p>\n\n\n\nWhy Desktop Banners Matter<\/h2>\n\n\n\n
\n
Cross-Device Strategies<\/h2>\n\n\n\n
Strategy 1: QR Code Banner<\/h3>\n\n\n\n
<div class="smart-banner smart-banner--desktop">\n <div class="smart-banner__content">\n <img src="\/app-icon.png" class="smart-banner__icon" alt="App" width="40" height="40" \/>\n <div>\n <p class="smart-banner__message">Get the mobile app<\/p>\n <p class="smart-banner__sub">Scan the QR code with your phone<\/p>\n <\/div>\n <\/div>\n <div class="smart-banner__qr">\n <img src="\/api\/qr?url=https:\/\/tolk.link\/app" alt="QR code to download the app" width="80" height="80" \/>\n <\/div>\n <button class="smart-banner__close" aria-label="Dismiss">×<\/button>\n<\/div>\n<\/code><\/pre>\n\n\n\n\n
\n
function generateDesktopBannerQR() {\n const currentPath = window.location.pathname;\n const qrUrl = `https:\/\/tolk.link\/app?dl=${encodeURIComponent(currentPath)}`;\n return `https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=160x160&data=${encodeURIComponent(qrUrl)}`;\n}\n<\/code><\/pre>\n\n\n\nStrategy 2: SMS to Phone<\/h3>\n\n\n\n
<div class="smart-banner smart-banner--desktop">\n <p>Get the app on your phone<\/p>\n <form class="smart-banner__sms-form">\n <input type="tel" placeholder="Phone number" class="smart-banner__phone" \/>\n <button type="submit" class="smart-banner__cta">Send Link<\/button>\n <\/form>\n<\/div>\n<\/code><\/pre>\n\n\n\ndocument.querySelector('.smart-banner__sms-form').addEventListener('submit', async (e) => {\n e.preventDefault();\n const phone = document.querySelector('.smart-banner__phone').value;\n const deepLink = `https:\/\/tolk.link\/app?dl=${encodeURIComponent(window.location.pathname)}`;\n\n await fetch('\/api\/send-app-link', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ phone, link: deepLink }),\n });\n\n showConfirmation('Link sent! Check your phone.');\n});\n<\/code><\/pre>\n\n\n\n\n
\n
Strategy 3: Email to Self<\/h3>\n\n\n\n
<div class="smart-banner smart-banner--desktop">\n <p>Email yourself a link to the app<\/p>\n <form class="smart-banner__email-form">\n <input type="email" placeholder="Your email" class="smart-banner__email" \/>\n <button type="submit" class="smart-banner__cta">Send<\/button>\n <\/form>\n<\/div>\n<\/code><\/pre>\n\n\n\n\n
\n
Strategy 4: Logged-In Cross-Device<\/h3>\n\n\n\n
\/\/ On desktop, record the deep link context\nif (isDesktop() && isLoggedIn()) {\n await fetch('\/api\/cross-device-context', {\n method: 'POST',\n body: JSON.stringify({\n userId: currentUser.id,\n context: window.location.pathname,\n }),\n });\n}\n\n\/\/ On mobile web, check for pending context\nif (isMobile() && isLoggedIn()) {\n const pending = await fetch(`\/api\/cross-device-context?userId=${currentUser.id}`);\n if (pending.context) {\n showBanner(`Continue where you left off: "${pending.title}"`, pending.context);\n }\n}\n<\/code><\/pre>\n\n\n\nDesktop Banner Design<\/h2>\n\n\n\n
Placement<\/h3>\n\n\n\n
\n
Size and Proportion<\/h3>\n\n\n\n
\/* Desktop: slim top bar *\/\n@media (min-width: 768px) {\n .smart-banner {\n height: 48px;\n font-size: 14px;\n }\n\n .smart-banner__qr img {\n width: 36px;\n height: 36px;\n }\n}\n<\/code><\/pre>\n\n\n\nQR Code Sizing<\/h3>\n\n\n\n
When to Show Desktop Banners<\/h2>\n\n\n\n
\n
\n
Tolinku Desktop Banners<\/h2>\n\n\n\n