Using Secure Websockets, Syndeo’s backend is in constant communication with your Chrome Extension’s Background Worker.

This allows Syndeo to trigger notifications that are delivered via the Chrome Notification API and capture any interactions your users have with them.

These websockets also enable you to send any custom user data back to Syndeo and visualize it all in your personalized admin dashboard where you can manage all communications.

• Create an account to get started.
• Register your application directly on the Syndeo Platform by going to the “My Account” tab and clicking on “+ Add Extension”

• Once you have registered your app, it will remain as ‘Pending’ until you finalize the connection via the Manifest V2 or V3 installation. For these you will need the ExtensionID and the Token that can be retrieved from this table.
• Once the connection is finalized and the first user has initialized the connection with this extension - you will see the status change to Linked. From this page you will be able to view the total number of users - and can remove it if needed.

Understanding how your users interact with your Chrome extension is the key to creating successful and engaging communications.

Syndeo gives developers like you the power to customize the user information you receive and tailor user communications to your unique needs and preferences. With Syndeo, the focus remains on your users, helping you provide a more personalized and enriching extension experience.

Connecting your Chrome Extension with Syndeo

Before you begin, your chrome extension must be connected to Syndeo. If you have not done this yet you can take a look at How to connect.

Visualize User Information in Syndeo

Once your chrome extension is successfully connected to your Syndeo Account, everytime one of your users becomes active, their data will be sent to your admin platform creating new entries in your Users list.

From the Dashboard tab, you will have access to your Personalized Dashboard. By default, a few visualizations are already present. This gives you insights into your Active Users, the New Users that have joined your app, and the overall Total Users.

Once you have configured sending custom data to the Syndeo platform, feel free to Add Visualisations to display the data as you see fit.

From the Users tab, you are also able to view each of your Users in detail and the data associated with them. Below is an example of the view you would see. The users here have some of the default fields: Last Login, Date Joined, etc. We have also added the custom field Paying User, which allows us to differentiate users who have subscribed to a premium plan or not. These fields can then be used to determine who receives a communication or not.

Send Custom User Data to Syndeo

For example, once a user subscribes to your premium offering - you can update the value of the ‘syndeo’ object in local storage to have an extra field PremiumUser:True . This will allow you to then target only premium users or alternatively target users on free accounts.

Implementation Guidance

For any issues setting these up, feel free to contact us. We will do our best to help you as quickly as possible!

Creating, Automating, and Scheduling Notifications

Ensuring customized and focused communication with your users is crucial for enhancing user engagement and maximizing the value delivered in the user experience. With Syndeo, developers can create, automate and schedule their communications while targetting specific users and delivering personalized messages.

Possible Situations

From our personal experience as chrome extension developers, and using feedback from the community here are various scenarios that could be resolved using a well organnized and targeted communication strategy:

• Encourage full product use: Alert your users of a new feature and how they can have access or how to use it
• Avoid lengthy web store approvals: Communicating information that changes regularly
• Increase premium subscriptions: Inform your users of a temporary discount on your premium subscriptions - For free trial users, give updates on the benefits of premium subscriptions
• Improve your product: Ask for user feedback via buttons or text response and visualize the responses

Visualize Your Notifications

From Syndeo’s Admin platform, direct yourself to the Notifications page to visualize the communications you have sent or that are still in progress

From this page you can cancel any notifications that is “In Progress”, you can resend any completed notification and see how many users have been reached by each notification

From the main Dashboard you can also view some visualizations about the number fo notifications created/delivered to your users

Creating Notifications

From the Notifications page, you can create a new communication by using the “+ Create Notification” button. You will then be prompted to fill in a few required fields to determine the content of the notification

These are the customizable fields for your communication:

• Notification Title: The title that will be on the notification
• Main Text: The body of the message
• Notification Type: The type of notification Text / Buttons
• Schedule for later date: Allows you to set the date at which to trigger this notification
• Trigger notification on event: Allows you to create a trigger logic based on the user info you have stored
• Users to Receive: The targeted users (if trigger notification is not selected). You can select All Users or Filter which will then prompt you to select the filters you which to apply

Personalizing the Communication

In order to deliver a personalized message - you have the possibility of using User variables with the Notification Title and the Main Text Message.

To do so, simply start typing “%” this will display any available variables. For example if you have access to the value NAME for your users - within the text fields you can use %NAME% which will be replaced by the actual value when delivering the message.

For more information on how to get access to custom user variables you can follow the short guide here

Implementation Guidance

For any issues setting these up, feel free to contact us. We will do our best to help you as quickly as possible!

Connecting the Syndeo Admin Dashboard to your Chrome Extension is an effortless process. The changes involve updating your manifest permissions as well as setting up a background worker that will be responsible to collect and dispatch user notifications as well as send user behaviour data back to Syndeo.

Manifest Changes

To enable the connection a few permissions need to be added to your manifest file:

• Storage: This permission is needed to store a unique User ID that is needed to identify the user on the analytics page and to receive notification
• Alarms: The permission allows Syndeo to check continuously for new notifications to display to the user
• Notifications: Allows you to display notifications to your users

Background Service Worker

The background service worker will need to be defined in the Manifest File (if a background worker is not already defined). This can be done by setting the value service_worker to point to a Javascript file in your repository.

If you do not have a background service worker in place, simply create a new Javascript file and place the code content shown below in it. Make sure the name of the file matches exactly the path specified in the Manifest File above.

If you do have a background worker already in your extension, simply add the piece of code to the file

The Extension ID and SYNDEO_AUTH_TOKEN can be obtained by following this quick tutorial: Connect Chrome Extension

      class Syndeo {
    static EXTENSION_ID = "" // extension ID from the Accounts Page
    static AUTH_TOKEN = "" // Auth Token for the extension found in the Accounts Page
    static ICON_URL = '' // path to your local image to be displayed on notifications
    
    initialize = async () => {
        const userObj = await this.getUserObj()
        this.ws = new WebSocket(`wss://syndeo-app.syndeo.cloud/${Syndeo.EXTENSION_ID}?authToken=${Syndeo.AUTH_TOKEN}&userID=${userObj['user_id']}`)
        this.ws.onmessage = (event) => {
            const jsonEvent = JSON.parse(event.data)
            /* Handle messages received from the websocket */
            switch (jsonEvent['type']){
                case 'userInfo':
                    // update user's profile data
                    this.ws.send(JSON.stringify(userObj))
                    break;
                case 'notificationInfo':
                    // handling incoming notification
                    jsonEvent['notification']["iconUrl"] =  Syndeo.ICON_URL
                    console.log(jsonEvent)
                    chrome.notifications.create(jsonEvent["id"], jsonEvent['notification'], (notificationId) => {
                        if(notificationId == undefined){
                            console.log("Error receiving the notification -- verify path to ICON url")
                        }
                        this.ws.send(JSON.stringify({
                            'type':'notificationUpdate',
                            'notificationID':notificationId,
                            'userID':userObj['user_id'],
                            'extensionID':Syndeo.EXTENSION_ID,
                            'status':'delivered'
                        }))
                    });
                    break;
                case 'redirect':
                    chrome.tabs.create({ url: jsonEvent['redirectUrl'] });
                    break;
                case 'error':
                    console.log('Syndeo Error encountered - ' + jsonEvent['errorMessage'])
            }

        };
         /* Respond to the user's clicking one of the buttons */
        chrome.notifications.onButtonClicked.addListener((notificationId, buttonIdx) => {
            this.ws.send(JSON.stringify({
                'type':'buttonClicked',
                'notificationID':notificationId,
                'userID':userObj['user_id'],
                'extensionID':Syndeo.EXTENSION_ID,
                'buttonIndex':buttonIdx
            }))
        });
    }
    getUserObj = async () => {
        // userObj will represent that data that you send to Syndeo
        // You will be able to use this data to target notifications and within notifications
        // The existing fields are : 
        // last login -  value of the last websocket connection
        // date joined - date when the user joined (you may override it)
        // For any other data that you which to appear in Syndeo you can place in userObj
        let userData = await this.storageGet("syndeo");
        if (userData && userData['user_id'] != undefined) {
            userData["type"] = "userUpdate" // Do not remove
            userData["firstName"] = "Romain"
            userData['lastName'] = "Boudet"
            userData['payingUser'] = true
            userData['subscriptionType'] = 'growth'
            return userData
        } else {
            let newUserID = Date.now().toString(36) + Math.random().toString(36).substring(2);
            const userObj =  {  
                                // MANDATORY FIELDS - Do not remove
                                "type":"userUpdate",
                                "user_id":newUserID,
                                // SET ANY OTHER VALUES YOU WANT BELOW 
                                // field_1: value1
                                // ...
                                }
            chrome.storage.local.set({"syndeo": userObj});
            return userObj;
        }
    }
    storageGet = (item) => {
        return new Promise((resolve, reject) => {
            chrome.storage.local.get(item, function(data) {
                if(data[item]!==undefined)
                    resolve(data[item]);
                else
                    resolve({});
            });
        });
    }
}

// STARTING THE SYNDEO INSTANCE
const syndeo = new Syndeo();
chrome.alarms.create("notificationHandler", {
    // This will serve as a recurrent check for User Notifications
    // Connections are limited to 1 connection every 5 minutes per user
    delayInMinutes: 1, 
    periodInMinutes: 5
});
chrome.alarms.onAlarm.addListener(function(alarm) {
    if (alarm.name === "notificationHandler") {
        syndeo.initialize();
    }
});

Authorize Notifications

Finally, in order for the notifications to be displayed notifications from Google Chrome need to be enabled on your computer.

This will have to be communicated to your users in some way in order for the notifications to be successfully delivered

Implementation Guidance

For any help required for the implementation process - feel free to reach out to us with any questions you might have. We will be delighted to assist you as quickly as possible.

Similarly for any feature requests or suggested changes please send us an email at romain.boudet@syndeo.cloud