Web Setup

Supported Platforms

Mac OS Website push notifications are supported by Mac OS X 10.9 ("Mavericks") and later releases.

Chrome Website push notifications are supported by Chrome version 42 and later releases.

Firefox Supported.

Edge Supported.

Yandex Supported.

Opera Supported.

To see browser penetration you can visit the following sites,

Browsers usage rate on netmarketshare:

Browser Market Share

Browsers usage rate on w3schools:

Browser Statistics

Google Chrome Browser

Important Note:

If you cannot see Web Setup in the panel, please ensure that you reach out to your Customer Success Manager to verify your permissions.

We are excited to introduce an updated integration process, featuring the newly added: Developers > Netmera Onboarding page in our panel. This enhancement aims to make integrating Netmera into your platform even more straightforward.

This revised Web SDK integration process is divided into four key steps including the Fancy Box settings. To start Web SDK Setup navigate to Developers > Netmera Onboarding on your Netmera Panel.

Step 1: Select a Platform

Choose the platform for which you want to perform SDK integration. In this step, you'll find cards displaying the platform name and its status, indicating at which stage of integration you are. You must select a platform from this screen before proceeding to the next steps.

If you've completed the integration and need to make changes later, you can do so by clicking the "Edit" button.

Step 2: SDK Integration

In this phase, you'll initiate the SDK in your project. Here are the key components of this step:

• Site URL (Required): Enter the URL of the website where you wish to perform the integration.

• API Key: This specifies which Netmera Panel should receive the data from your site (found in Developer > App Info as the Web API Key).

• Code: Add this script to the head section of your project's code.

SDK Integration Code:

"eslintConfig": {
    "globals": {
        "netmera": true
    }
}
 //  If you use react or vue, add your code on your project package.json file.

• Files: Include these files in your project's root directory without altering their names or contents.

manifest.json File

If you have a manifest.json file, you can structure its content similar to the one in the provided link. The important fields here are "gcm_sender_id" and "gcm_user_visible_only," rather than "name" and "short_name."

If you don't have a manifest.json file, you can download this file directly and set the "sender_id" value with the value you obtained from your own Firebase, by creating an FCM project.

Download the "manifest.json" file from the provided link: https://bit.ly/3EpnAhG.

Copy the "manifest.json" file to the root directory of your website.

• Geolocation: Geolocation refers to the process of collecting and tracking a user's physical location or coordinates when they visit your website. Enabling geolocation allows you to gather location data each time a user visits your site.

• Session Length: Session length, measured in minutes, determines the duration of a user's session on your website. Netmera WebSDK preserves the user's session even when your web application runs in the background.

Default Session Lenght:

The default session length is set to 30 minutes, meaning that if a user remains active on your website for 30 minutes or less, their session will be maintained even if they briefly switch to other tasks or windows.

Recheck Files to see successful file uploads:

In order to check if your files have been uploaded successfully, you may use the 'Recheck Files' button next to 'Download Files'.

After configuring the settings on this page, you can proceed to the third step by clicking the "Save" button. However, there are important points to consider for successful testing:

For successful testing:

• Please be aware that testing your integration on a localhost environment may not accurately reflect the behavior of the Fancybox and events. To ensure accurate results, it is recommended to deploy your project to a production environment.

• Additionally, it's important to note that push notifications cannot be sent when testing on localhost. To test push notifications effectively, you must use a real domain or deploy your project to a live domain. Attempting to test push notifications on localhost may result in a 403 generic error.

Step 3: Push Settings

Firstly, if you select "Push enable," you can proceed to the next steps. If you choose "Disable," it means the integration process is completed without push settings. At this point, users can access the panel and collect events. If you've chosen Push enable, you can configure push settings to enable push notifications. Below are the details for the Chrome and Safari.

Chrome

• Ask for permission after ... visits: You can select when the notification permission prompt should appear after a certain number of visits to the page. The default value is 1.

• UTM Parameter: This feature automatically defines Netmera UTM parameters for the URLs of sent web pushes. It includes UTM Source: Netmera, UTM Medium: Campaign Title, and UTM ID: Campaign Name.

• Public Vapid Key - Private Vapid Key: VAPID (Voluntary Application Server Identification) keys are used for authentication when sending notifications to web browsers and push services. If you've previously integrated another web push service and are migrating users to Netmera, you can add your own keys without using the "Generate" button. Otherwise, you can proceed by clicking "Generate."

• Icon URL: Enter the URL of the icon image that will be added to your web push notifications.

• Google Project Api Key (Server key) - Google Project ID (Sender ID): You can obtain these data from your Firebase account. Visit Firebase Developer Console > Project Setting > Cloud Messaging for these details.

Firebase Setup

1. Head over to the Firebase console page and login using your existing Google ID. Click on “Create New Project”.

2. On the pop-up, give a meaningful name to the project. Something like “(domain name) Push”.

3. It will take a few seconds to create the project and it will automatically redirect you to the project dashboard.

4. Now, on the left-hand side, click on the “gear” icon and select “Project Settings”.

5. On the next page, click on “Cloud Messaging” you will find your “Sender ID” & “Server Key”.

Done. 👍 Now you can send pushes to your website on Chrome browser.

Safari

• Site Name: Enter your website's name.

• Website Push ID: This is the unique ID you assigned when creating the certificate.

• Allowed Sites: Specify the URLs of the websites where you want to enable Netmera integration.

• Webpush Icon: Upload a 256x256 pixel icon image for Safari push notifications.

• Apns Certificate: Export the certificate from developer.apple.com in p.12 format and upload it here.

• Certificate Password (Required): Enter the password for the Apns certificate.

• Certificate Type: You can proceed by selecting "Prod."

APNS for Mac OS Devices

Once you have registered and paid for the Apple Developer Program, and your application has been approved by Apple, you can proceed with the configuration. This configuration process involves two main tasks:

Creating a Web Site Push Identifier

• Log in to the Apple Developer Portal. Please note that you need to be logged in as the account owner (referred to as the "Agent" by Apple) to create certificates and configure Safari Push Notifications.

• Under the "Certificates, Identifiers & Profiles" section, click on "Manage your certificates, App IDs, devices, and provisioning profiles."

• You will see a list of certificates associated with your account (the list may be empty for new accounts). On the left side, under "Identifiers," click on "Website Push IDs," and then click the plus button in the top right corner to create a new Website Push ID.

• Provide a description and identifier. The identifier should be in reverse domain name format and based on a domain name that you own. It must start with "web." and usually end in "push." For example, if your domain name is "example.com," the identifier should be "web.com.example.push."

• Once you are satisfied with the details, click "Continue" and complete the process.

Creating a Certificate

• Go back to the "Certificates" page in the Apple Developer Portal.

• Click the plus button in the top right corner and select "Website Push ID Certificate" under the "Production" section. Scroll down and click "Continue."

• Choose the website push ID you created in the previous steps from the dropdown menu, and click the "Continue" button.

• Create a Certificate Signing Request (CSR) using the "Keychain Access" application on your Mac and upload it.

• Apple will provide you with a certificate to download at the end of the process. Double-click the certificate to add it to your local machine.

• Open the "Keychain Access" application (the same application where you created the CSR), and on the left-hand side, click on the "Certificates" category. Scroll until you find your new certificate, which should be named "Website Push ID: web.com.example.push."

• Expand the certificate by clicking the arrow to the left of it. You should see a key icon with the text "Safari Push Notifications: My description."

• Select both the key and the certificate by command-clicking on them.

• Right-click and choose "Export 2 items..."

• Select a location to save the p12 file, and Keychain will prompt you to set a password. Make sure to note down this password, as you will need it when submitting the p12 file on the Netmera panel.

Congratulations! You now have a p12 file that contains the certificate and key that will enable Netmera to send Safari Push Notifications on your behalf.

Configuration of Mac OS Push Notifications in Netmera Panel

Navigate to Developers > Push Backends > Safari page. You should have admin rights. Fill the form according to explanations shown for each field.

Done. 👍

Now you can send pushes to your website on Safari browser.

Step 4: Fancy Box Settings

• Enable: Choose whether to display the Fancy Box or only the native permission request.

• Show Again After: Determine when the Fancy Box should reappear for users who haven't granted notification permission initially.

• Animate: Enable this option if you want the Fancy Box to have animated effects.

• Preview: View a preview of the Fancy Box.

• Customize: If you wish to customize the Fancy Box with additional CSS, you can do so in this section.

👏 Web SDK Setup Completed

Upon completing all the steps, a modal will appear confirming that you have successfully completed the integration.

If you wish to use your own customized fancy box with added CSS, please contact us at [e-mail] to request a configuration update. Otherwise, please note that Netmera fancy box may overwrite the custom fancy box settings you have defined within the CSS. Your satisfaction is important to us, so don't hesitate to reach out for any assistance or clarifications.