OneSignal-Website-SDK/index.html at e487fd80ac473f2109c857b68be2fceb4a8b86d5 · OneSignal/OneSignal-Website-SDK · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>OneSignal Dev</title>
    <style>
      .in-app-notification {
        position: fixed;
        top: 20px;
        right: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 16px 24px;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        max-width: 350px;
        z-index: 10000;
        animation: slideIn 0.3s ease-out;
        font-family:
          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }
      .in-app-notification h4 {
        margin: 0 0 8px 0;
        font-size: 16px;
      }
      .in-app-notification p {
        margin: 0;
        font-size: 14px;
        opacity: 0.9;
      }
      .in-app-notification .close-btn {
        position: absolute;
        top: 8px;
        right: 12px;
        background: none;
        border: none;
        color: white;
        font-size: 20px;
        cursor: pointer;
        opacity: 0.7;
      }
      .in-app-notification .close-btn:hover {
        opacity: 1;
      }
      @keyframes slideIn {
        from {
          transform: translateX(100%);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }
      .demo-section {
        margin: 20px 0;
        padding: 16px;
        background: #f5f5f5;
        border-radius: 8px;
      }
      .demo-section h3 {
        margin-top: 0;
      }
      .toggle-btn {
        padding: 10px 20px;
        font-size: 14px;
        cursor: pointer;
        border: none;
        border-radius: 6px;
        margin-right: 10px;
      }
      .toggle-btn.active {
        background: #667eea;
        color: white;
      }
      .toggle-btn:not(.active) {
        background: #ddd;
        color: #333;
      }
    </style>
    <script>
      // set can a query param ?app_id=your_app_id OR
      // create an .env file and set VITE_APP_ID to your app id
      const appId =
        new URLSearchParams(window.location.search).get('app_id') ||
        '%VITE_APP_ID%';

      // Track whether to suppress notifications when tab is focused
      let suppressWhenFocused = false;

      // In-app notification display function
      function showInAppNotification(notification) {
        // Remove existing in-app notification if any
        const existing = document.querySelector('.in-app-notification');
        if (existing) existing.remove();

        const div = document.createElement('div');
        div.className = 'in-app-notification';
        div.innerHTML = `
          <button class="close-btn" onclick="this.parentElement.remove()">&times;</button>
          <h4>${notification.title || 'Notification'}</h4>
          <p>${notification.body || ''}</p>
        `;
        document.body.appendChild(div);

        // Auto-remove after 5 seconds
        setTimeout(() => div.remove(), 5000);
      }

      window.OneSignalDeferred = window.OneSignalDeferred || [];
      OneSignalDeferred.push(async function (OneSignal) {
        // for testing consent required
        // OneSignal.setConsentRequired(true);

        OneSignal.init({
          appId,
          // requiresUserPrivacyConsent: true, // requires custom site sestting in dashboard
          // promptOptions: {
          //   slidedown: {
          //     prompts: [
          //       {
          //         type: 'email',
          //         // autoPrompt: false,
          //       },
          //     ],
          //   },
          // },
        });
        OneSignal.User.addTag('test', 'test');

        OneSignal.Notifications.addEventListener(
          'foregroundWillDisplay',
          (event) => {
            console.log('[Demo] foregroundWillDisplay event received:', event);
          },
        );

        // OneSignal.setConsentRequired(true);
      });
    </script>
  </head>
  <body>
    <script type="module" src="/src/entries/pageSdkInit.ts"></script>
    <h1>OneSignal Dev</h1>
  </body>
</html>