Google Tag Manager

Forum Discussion

sanjayjaiswal's avatar
sanjayjaiswal
Active Member
5 months ago

Scratch & Win Campaign as a Modal Popup in Mobile App (android and iOS)

Hi All,

I am new to braze and creating a campaign named "Scratch&Win" for my mobile app users on Android and iOS native apps which are using Braze SDKs for corresponding mobile apps.

I am writing a Custom Code with HTML, CSS and javascript. I have uploaded all the required JS files (I am also using dependent js file for scratchpad wScratchPad.js), CSS and images in Braze Media Manager and using those links or Src added my code like below, but when launching to the app none of the images are loading in actual mobile apps.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width" />
  
  <title>wScratchPad</title>

  <link rel="Stylesheet" type="text/css" href="./demo/demo.css" />
  <script type="text/javascript" src="https://braze-images.com/appboy/communication/assets/code_assets/files/66b261c5153e07005904b258/original.js?1722966469"></script>
 
</head>
<body>
 
   <div id="scratchModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="closeModal()">&times;</span>
      <div id="content">
        <div class="content-box">
          <div id="demo2" class="scratchpad"></div>
          <div class="modal-actions">
            <input type="button" value="Reset" onclick="$('#demo2').wScratchPad('reset');"/>
            <input type="button" value="Clear" onclick="$('#demo2').wScratchPad('clear');"/>
            <input type="button" value="Enable" onclick="$('#demo2').wScratchPad('enable', true);"/>
            <input type="button" value="Disable" onclick="$('#demo2').wScratchPad('enable', false);"/>
          </div>
        </div>
      </div>
    </div>
  </div>
      <style>
       body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f0f0f0;
    }

    .modal {
      display: none; 
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      overflow: auto;
      justify-content: top;
      align-items: top;
    }

    .modal-content {
      position: relative;
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 15px rgba(0,0,0,0.3);
      width: 90%;
      max-width: 400px; /* Adjusted max-width for mobile */
      box-sizing: border-box;
      margin: auto;
    }

    .close {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 24px;
      color: #333;
      cursor: pointer;
    }

    .scratchpad {
      width: 100%;
      height: 350px; 
      margin-top:15px;
      margin-right: 15px;
      margin-bottom:15px;
      margin-left:1px;
    }

    .modal-actions input {
      margin-right: 10px;
      font-size: 14px; /* Adjusted font size for mobile */
    }

    @media (max-width: 600px) {
      .modal-content {
        width: 95%; /* Slightly larger width for smaller screens */
      }

      .scratchpad {
        height: 200px; /* Further reduce height on very small screens */
      }
      
      .modal-actions input {
        font-size: 12px; /* Smaller font size on smaller screens */
        margin-right: 5px; /* Reduced margin for small screens */
      }
    }
      </style>

      <script type="text/javascript" src="https://braze-images.com/appboy/communication/assets/code_assets/files/66b261b6a936b7005981d63f/original.js?1722966454"></script>
      <script type="text/javascript">
        // Show modal on page load
        window.onload = function() {
            showModal();
        };

        // Show modal
        function showModal() {
            document.getElementById('scratchModal').style.display = 'flex';
            initializeScratchCard();
        }

        // Close modal
        function closeModal() {
            document.getElementById('scratchModal').style.display = 'none';
        }

 function initializeScratchCard() {
        $('#demo2').wScratchPad({
         size: 40,
          bg: 'https://braze-images.com/appboy/communication/assets/image_assets/images/....../original.jpg?1722941151',
          fg: 'https://braze-images.com/appboy/communication/assets/image_assets/images/...../original.jpg?1722937484',
          'cursor': 'url("https://braze-images.com/appboy/communication/assets/image_assets/images/..../original.png?1717067516") 5 5, default',
          scratchMove: function (e, percent) {
            if (percent > 70) {
              this.clear();
            }
          }
        });
         }
      </script>
      
    </div>
  </div>

  
</body>
</html>

Please help me for resolving this issue.

Thanks,

Sanjay Jaiswal

Canvas
  • DavidO's avatar
    DavidO
    Strategist II
    5 months ago

    Hi sanjayjaiswal 

    A couple of things that might help solve this.

    To help with clear structure and readability of your code, the <style> tags are normally contained within the <head> tag of your email. I'm not versed in wScratchPad but I'm assuming this would not change standard conventions. This also separates styling from the content.

    For example:

    <head>
   <style>
   </style>
</head>

<body>
</body>

    Looking at your image URLs, if you paste the URL into your browser does the image load? When I paste one in, it contains the '....' which is an incomplete URL. You need to be sure those URLs are correct and working, and then paste them into your code. I would expect the pasted URLs to not contain '...' in them, unless again this is a wScratchPad thing I am not aware of.

    Can you let me know your experience with custom code just so I know how deep we can go?

    Lastly, when posting code into these threads, there is an insert code button which makes it look nicer for debugging 🙂


    Hope this helps and happy to keep debugging.
    David ✌️

  • sanjayjaiswal's avatar
    sanjayjaiswal
    Active Member
    5 months ago

    I am facing issue while loading the popup screen for "Scratch&Win" campaign in iOS/Android mobile App. Help/suggest any solution for it.