How to Add a Combined Android & iOS App Popup to Your Sngine Site

Below is a single combined script that detects whether the visitor is on Android or iOS and then displays a centered popup with your app’s logo at the top and the appropriate “Get it on Google Play” or “Download on the App Store” badge underneath. It uses the local SVG badge paths:

• Android badge: /content/themes/default/images/svg/playstore_badge.svg

• iOS badge : /content/themes/default/images/svg/appstore_badge.svg

You’ll notice two placeholder comments—PUT_LOGO_URL_HERE, PUT_ANDROID_APP_URL_HERE, and PUT_IOS_APP_URL_HERE—where you must insert your actual logo URL and store URLs.

<!-- BEGIN: Combined Android + iOS App Popup -->
<script>
(function() {
  // 1) Inject CSS for overlay & perfectly centered popup
  const style = document.createElement('style');
  style.textContent = `
    #app-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 9999;
    }
    #app-popup {
      display: none;
      position: fixed;
      top: 50%;      /* vertically center */
      left: 50%;     /* horizontally center */
      transform: translate(-50%, -50%);
      width: 260px;
      max-width: 90%;
      padding: 20px;
      background: #fff;
      border: 2px solid #000;
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
      text-align: center;
      z-index: 10000;
      border-radius: 8px;
    }
    #app-popup img#app-logo {
      max-width: 100px;
      margin: 0 auto 12px;
      display: block;
    }
    #app-popup .app-title {
      margin: 8px 0;
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
    #app-popup .app-description {
      margin: 8px 0;
      font-size: 14px;
      color: #000;
    }
    #app-popup img.app-badge {
      max-width: 180px;
      margin: 6px auto;
      display: block;
    }
    #app-popup button {
      margin-top: 12px;
      padding: 6px 12px;
      background: #396aff;
      color: #fff;
      border: none;
      cursor: pointer;
      border-radius: 4px;
    }
  `;
  document.head.appendChild(style);

  // 2) Create overlay & popup container
  const overlay = document.createElement('div');
  overlay.id = 'app-overlay';

  const popup = document.createElement('div');
  popup.id = 'app-popup';

  // 3) Logo element (leave src blank here; replace with your actual logo URL)
  const logo = document.createElement('img');
  logo.id  = 'app-logo';
  logo.src = '';  
  // PUT_LOGO_URL_HERE  
  logo.alt = 'App Logo';

  // 4) Container for title/description/badge
  const msg  = document.createElement('div');
  msg.id     = 'app-message';

  // 5) Close button
  const btn = document.createElement('button');
  btn.textContent = 'Close';
  btn.addEventListener('click', closePopup);

  // Assemble popup structure
  popup.append(logo, msg, btn);
  document.body.append(overlay, popup);

  // 6) Detect Android or iOS
  function detectMobileOS() {
    const ua = navigator.userAgent || navigator.vendor || window.opera;
    if (/android/i.test(ua))                         return 'android';
    if (/iPad|iPhone|iPod/.test(ua) && !window.MSStream) return 'ios';
    return 'other';
  }

  // 7) Show popup only on Android or iOS, with the correct badge/link
  function showPopup() {
    const os = detectMobileOS();
    if (os === 'android') {
      msg.innerHTML =
        '<div class="app-title">Get the App</div>' +
        '<div class="app-description">Download our app from Google Play!</div>' +
        '<a href="" target="_blank">' +
          // PUT_ANDROID_APP_URL_HERE  
          '<img class="app-badge" src="/content/themes/default/images/svg/playstore_badge.svg" ' +
               'alt="Get it on Google Play">' +
        '</a>';
    }
    else if (os === 'ios') {
      msg.innerHTML =
        '<div class="app-title">Get the App</div>' +
        '<div class="app-description">Download our app from the App Store!</div>' +
        '<a href="" target="_blank">' +
          // PUT_IOS_APP_URL_HERE  
          '<img class="app-badge" src="/content/themes/default/images/svg/appstore_badge.svg" ' +
               'alt="Download on the App Store">' +
        '</a>';
    }
    else {
      return; // Not Android or iOS → do not show anything
    }

    overlay.style.display = 'block';
    popup.style.display   = 'block';
  }

  // 8) Close handler
  function closePopup() {
    overlay.style.display = 'none';
    popup.style.display   = 'none';
  }

  // 9) Trigger popup 2 seconds after page load
  window.addEventListener('load', () => setTimeout(showPopup, 2000));
})();
</script>
<!-- END: Combined Android + iOS App Popup -->

How to Install & Configure

1. Copy the entire <script>…</script> block above (including the “BEGIN”/“END” comments).

2. Open your Sngine theme’s template where you want this popup to fire:

   • Option A (news-only): blogs.tpl
     (e.g. /content/themes/YourThemeName/templates/posts/blogs.tpl)

   • Option B (site-wide): footer.tpl or footer.php
     (e.g. /content/themes/YourThemeName/footer.tpl or footer.php)

3. Scroll to the bottom of that file and paste the script directly before the closing </body> tag.

   {**
     … existing template content …
   **}
   <!-- BEGIN: Combined Android + iOS App Popup -->
   <script>
     (function() {
       // (all code from steps 1–9 above)
     })();
   </script>
   <!-- END: Combined Android + iOS App Popup -->
   </body>
   

4. Save the template file.

5. Replace the placeholder comments inside the script:

   • Logo URL:
     Find this line:

     logo.src = '';  
     // PUT_LOGO_URL_HERE
     

     Replace with, for example:

     logo.src = 'https://yourdomain.com/path/to/your-logo.png';
     

   • Android (Google Play) URL:
     Find this part inside the if (os === 'android') block:

     '<a href="" target="_blank">' +
       // PUT_ANDROID_APP_URL_HERE  
       '<img class="app-badge" src="/content/themes/default/images/svg/playstore_badge.svg" alt="Get it on Google Play">' +
     '</a>';
     

     Replace with, for example:

     '<a href="https://play.google.com/store/apps/details?id=com.example.app" target="_blank">' +
       '<img class="app-badge" src="/content/themes/default/images/svg/playstore_badge.svg" alt="Get it on Google Play">' +
     '</a>';
     

   • iOS (App Store) URL:
     Find this part inside the else if (os === 'ios') block:

     '<a href="" target="_blank">' +
       // PUT_IOS_APP_URL_HERE  
       '<img class="app-badge" src="/content/themes/default/images/svg/appstore_badge.svg" alt="Download on the App Store">' +
     '</a>';
     

     Replace with, for example:

     '<a href="https://apps.apple.com/us/app/your-app-id" target="_blank">' +
       '<img class="app-badge" src="/content/themes/default/images/svg/appstore_badge.svg" alt="Download on the App Store">' +
     '</a>';
     

6. Save again and then open your website on:

   • An Android device or Android user-agent → you should see the logo + “Get it on Google Play” badge.

   • An iOS device or iOS user-agent → you should see the logo + “Download on the App Store” badge.

   • A desktop or other non-mobile device → the popup will not appear.

Quick Recap

1. Paste the combined script before </body> in blogs.tpl (or footer.tpl/php).

2. Insert your actual:

   • Logo URL where the comment PUT_LOGO_URL_HERE appears.

   • Play Store URL where PUT_ANDROID_APP_URL_HERE appears.

   • App Store URL where PUT_IOS_APP_URL_HERE appears.

3. Save and test on Android and iOS devices.

That’s it—now both Android and iOS visitors will see a nice, centered popup with your app logo and the correct store badge.

If you want it to appear only on blog pages, insert it into blogs.tpl. If you want it everywhere, insert it into footer.tpl, but keep in mind that putting it in the footer will make it show on every page refresh, which can become annoying. It’s better to place it just in blogs.tpl so it only shows for users who are reading an article.

Thank you for the contribution... just a tip to keep things cleaner ..

When you adding code and specialty big ones like this. Do not add directly to the template files. Create a new template name it my new file.tpl and add your code there and then include where ever you want like this {include file='MyNewFile.tpl'}

I appreciate everyone who is contributing to make SNgine a better script. 

Jane, what if the file I want to reference is in another folder, how will I write the instruction?

Will it be {include file='foldername/MyNewFile.tpl'} 

Thank you  Jane for the advice  I really appreciate it because it hadn’t occurred to me before.

you are welcome, and I know we do and learn, we make mistake and learn, take a look at my first addons in sngine and te ones now :D

as for including from another folder you have to do exacly as you said :), we are learning here, and I want to see this big libray of tutorial... :) it's amazing... thank you all