Create a Firebase Project
Go to https://console.firebase.google.com. Click on "Add project." Enter a project name and confirm the settings. (Optional) Link the project with Google Analytics or skip this step.
Generate Firebase Admin SDK JSON
In the Firebase Console, click on the gear icon (⚙️) in the top-left corner → "Project settings." Navigate to the "Service Accounts" tab. Click on "Generate new private key" → this will download a JSON file with your keys. This file contains values like project_id, private_key, and client_email. You will save this file later in your sending tool (this is your firebase-adminsdk JSON).
Register a Web App in Firebase
In Project settings → "General" tab. Scroll down to "Your apps" → click on "Add app" → select the web icon (🌐). Enter an app nickname and confirm. You will now get a Firebase configuration snippet with values like apiKey, authDomain, projectId, messagingSenderId, and appId.
Enable Cloud Messaging
In Project settings → "Cloud Messaging" tab. You will find the Sender ID here (important for web push). Scroll down further to "Web Push certificates." Here, you can generate a VAPID key. Click on "Generate key" → your Public VAPID key will appear. You'll need to enter this key in your junePushConfig.js file.
Insert the HTML Snippet
This HTML snippet is embedded into your website so users can enable push notifications:
<button id="btn">Activate Push Notifications</button>
<script src="/junePushConfig.js"></script>
<script src="https://view.juneapp.com/june-lp-framework/dev/sdk/push_notifications_v2/js/junePushSdk.js"></script>
<script>
const sdk = new JunePushSDK({
vapidKey: window.__JUNE_PUSH_CONFIG__.vapidKey,
collectToken: window.__JUNE_PUSH_CONFIG__.collectToken,
disablePushNotificationInForeground: false,
apiBaseUrl: 'https://engagement.juneapp.com'
});
document.getElementById("btn").addEventListener("click", async () => {
const token = await sdk.register();
console.log("FCM Token:", token);
});
sdk.listenToForegroundMessages(payload => {
//alert("New Message: " + payload.notification.title);
});
</script>
Create the Firebase JS Configuration File
Create a file named junePushConfig.js where the Firebase data and the collectToken field for JUNE will be stored:
var config = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
vapidKey: "",
collectToken: ""
};
// make universally available
if (typeof window !== "undefined") {
window.__JUNE_PUSH_CONFIG__ = config;
}
if (typeof self !== "undefined") {
self.__JUNE_PUSH_CONFIG__ = config;
}
Submit the Firebase Admin SDK JSON File
Contact our support from within JUNE:
You can securely submit the Firebase Admin SDK JSON file to us here. We'll handle the configuration in JUNE for you. With that, the setup is complete.