Web Setup
Last updated
Last updated
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.
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.
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:
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.
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 Push Settings: This section is for Chrome Push Settings. If you wish to continue for Safari, please click the tab 'Safari' above.
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.
Head over to the Firebase console page and login using your existing Google ID. Click on “Create New Project”.
On the pop-up, give a meaningful name to the project. Something like “(domain name) Push”.
It will take a few seconds to create the project and it will automatically redirect you to the project dashboard.
Now, on the left-hand side, click on the “gear” icon and select “Project Settings”.
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.
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 support@netmera.com 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.
