Skip to content

Commit

Permalink
Update inapp4.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@minhyeok4dev
minhyeok4dev authored Jun 22, 2024
1 parent a22c701 commit a1da001
Showing 1 changed file with 58 additions and 43 deletions.
101 changes: 58 additions & 43 deletions inapp4.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Onesignal In-App Message</title>
<style>
* {
Expand All @@ -17,25 +17,25 @@
padding-right: var(--safe-area-inset-right);
padding-bottom: calc(var(--safe-area-inset-bottom) + 20px);
padding-left: var(--safe-area-inset-left);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
display: flex;
align-items: center;
}

.center-modal {
position: relative;
background: #FFF;
margin: 18px;
background: #fff;
padding: 24px;
border-radius: 8px;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 85%;
width: 100%;
box-shadow: rgb(0 0 0 / 30%) 0px 0px 12.5px, rgb(0 0 0 / 15%) 0px 0px 2.5px;
box-shadow: rgb(0 0 0 / 30%) 0px 0px 12.5px,
rgb(0 0 0 / 15%) 0px 0px 2.5px;
}

.center-modal .close-button {
Expand Down Expand Up @@ -76,7 +76,7 @@
.center-modal button {
font-size: 16px;
color: #fff;
background-color: #1F8FEB;
background-color: #1f8feb;
width: 100%;
padding: 12px;
border-radius: 4px;
Expand Down Expand Up @@ -110,19 +110,28 @@
<body>
<div class="center-modal">
<div class="close-button" data-onesignal-unique-label="close-button">
<svg width="10" height="10" preserveAspectRatio="none" viewBox="0 0 8 8" fill="none"
xmlns="http://www.w3.org/2000/svg">
<svg
width="10"
height="10"
preserveAspectRatio="none"
viewBox="0 0 8 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.80309 1.14768C8.06564 0.885137 8.06564 0.459453 7.80309 0.196909C7.54055 -0.0656362 7.11486 -0.0656362 6.85232 0.196909L4 3.04923L1.14768 0.196909C0.885137 -0.0656362 0.459453 -0.0656362 0.196909 0.196909C-0.0656362 0.459453 -0.0656362 0.885137 0.196909 1.14768L3.04923 4L0.196909 6.85232C-0.0656362 7.11486 -0.0656362 7.54055 0.196909 7.80309C0.459453 8.06564 0.885137 8.06564 1.14768 7.80309L4 4.95077L6.85232 7.80309C7.11486 8.06564 7.54055 8.06564 7.80309 7.80309C8.06564 7.54055 8.06564 7.11486 7.80309 6.85232L4.95077 4L7.80309 1.14768Z"
fill="#111111" />
fill="#111111"
/>
</svg>
</div>
<h1>Heading</h1>
<img src="https://media.onesignal.com/iam/default_image_20200320.png" />
<div class="button-container">
<div class="button-column">
<button class="open-url" data-onesignal-unique-label="my-open-url-button">Open URL</button>
<button class="tag-user" data-onesignal-unique-label="my-tag-user-button">Tag User</button>
<button class="open-url-web">Open URL(Web)</button>
<button class="open-url-app">Open URL(App)</button>
<button class="set-tags">Set Tags</button>
<button class="track-event">Track Event</button>
<!--
In-App Messages with a Push Permission Prompt button will not be shown to
users who have already allowed notifications.
Expand All @@ -132,40 +141,46 @@ <h1>Heading</h1>
OneSignal SDK released after July 2022.
Learn More: https://documentation.onesignal.com/docs/how-to-prompt-for-push-permissions-with-an-in-app-message
-->
<button class="push-prompt" data-onesignal-unique-label="my-push-prompt-button">Prompt Push</button>
<button class="location-prompt" data-onesignal-unique-label="my-location-prompt-button">Prompt Location</button>
</div>
<div class="button-column">
<button class="add-click-name" data-onesignal-unique-label="my-add-click-name-button">Add Click Name</button>
<button class="send-outcome" data-onesignal-unique-label="my-send-outcome-button">Send Outcome</button>
<button class="push-prompt">Prompt Push</button>
<button class="close-button">Close</button>
</div>
</div>
</div>
<script>
// Your code here
document.querySelector(".close-button").addEventListener("click", function(e) {
OneSignalIamApi.close(e);
});
document.querySelector(".tag-user").addEventListener("click", function(e) {
OneSignalIamApi.tagUser(e, { fiz: "baz" });
});
document.querySelector(".push-prompt").addEventListener("click", function(e) {
// Invoke the OneSignalIamApi.triggerPushPrompt method here while here passing in the event
// If this method is utilized then the message will not be sent to Android devices or older
// iOS devices where push prompting is not supported.
});
document.querySelector(".location-prompt").addEventListener("click", function(e) {
OneSignalIamApi.triggerLocationPrompt(e);
});
document.querySelector(".add-click-name").addEventListener("click", function(e) {
OneSignalIamApi.addClickName(e, "test_click_name");
});
document.querySelector(".send-outcome").addEventListener("click", function(e) {
OneSignalIamApi.sendOutcome(e, "test_outcome");
});
document.querySelector(".open-url").addEventListener("click", function(e) {
OneSignalIamApi.openUrl(e, "https://documentation.onesignal.com/docs/in-app-js-library");
});
document
.querySelector(".open-url-web")
.addEventListener("click", function (e) {
FlareLaneIAMBridge.openUrl("https://flarelane.co.kr/");
});
document
.querySelector(".open-url-app")
.addEventListener("click", function (e) {
FlareLaneIAMBridge.openUrl("maps://test");
});
document
.querySelector(".set-tags")
.addEventListener("click", function (e) {
FlareLaneIAMBridge.setTags({ foo: "bar" });
});
document
.querySelector(".track-event")
.addEventListener("click", function (e) {
FlareLaneIAMBridge.trackEvent("test_event", { foo: "bar" });
});
document
.querySelector(".push-prompt")
.addEventListener("click", function (e) {
// Invoke the OneSignalIamApi.triggerPushPrompt method here while here passing in the event
// If this method is utilized then the message will not be sent to Android devices or older
// iOS devices where push prompting is not supported.
FlareLaneIAMBridge.requestPushPermission(true);
});
document
.querySelector(".close-button")
.addEventListener("click", function (e) {
FlareLaneIAMBridge.close();
});
</script>
</body>
</html>

0 comments on commit a1da001

Please sign in to comment.