Join our Facebook Group
ScriptsTribe • Sngine • Community
Join

Foren

The great place to discuss topics with other users

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

'
Join the Conversation Antwort veröffentlichen
Besar Hoxha
Besar Hoxha
Member
Joined: 2025-04-18 02:05:10
2025-06-02 22:24:28

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

Besar Hoxha
Besar Hoxha
Member
Joined: 2025-04-18 02:05:10
2025-06-02 22:28:56

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.

 

 

 

Jane Marcia
Jane Marcia
Admin
Joined: 2025-05-17 02:14:16
2025-06-02 23:56:53

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.

 

 

 

Israel Unya
Israel Unya
Member
Joined: 2024-11-25 09:55:35
2025-06-03 00:55:11

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.

 

 

 

Besar Hoxha
Besar Hoxha
Member
Joined: 2025-04-18 02:05:10
2025-06-03 01:39:09

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.

 

 

 

Jane Marcia
Jane Marcia
Admin
Joined: 2025-05-17 02:14:16
2025-06-03 01:44:39

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.

 

 

 

Antwort veröffentlichen
Mitglieder 359
Online 1
Beiträge 114
Antworten 178
Sungol Kloko
Latest Threads
See Forums
Jane Marcia
Is it working?
Von Jane Marcia
Jane Marcia
Sample Support
Von Jane Marcia
Jane Marcia
How does this work?
Von Jane Marcia
Mike Sieck
Gift-List
Von Mike Sieck
Israel Unya
Linking SNgine With My EMA
Von Israel Unya
Who's Online Now 1
© 2026 ScriptsTribe Deutsch
English Arabic Czech French Spanish Portuguese Deutsch Turkish Dutch Italiano Russian Romaian Portuguese (Brazil) Greek
Forums Rules Private Message Rules Refund Policy Anti-Piracy Policy Über Bedingungen Datenschutz Kontaktiere uns Mitte Verzeichnis
ScriptsTribe https://scriptstribe.com