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()">×</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
