Opt In / Opt Out - Mellowtel Docs

Introduction

In order to activate Mellowtel users must give their explicit consent. The library provides a way to opt in or opt out. The core idea is that since it’s their Internet bandwidth, they should decide if they want to share it or not. This is why on the first installation/update with Mellowtel imported you must show a disclaimer/consent dialog that is not dismissible. Moreover, there must always be a clear way for users to change the settings at their convenience.

Disclaimer example

You can implement the opt-in/opt-out logic in two ways:

Using the recommended implementation with the pre-built page provided by Mellowtel. You can simply call the generateAndOpenOptInLink() method.
Creating your own opt-in/opt-out elements. If users agree you can activate them on the Network by calling the optIn() method. If they don’t agree, you call the optOut() method.

1) Recommended implementation

When you import Mellowtel, we recommend opening a pre built page so users can see the disclaimer and decide if they want to opt in or out. This also ensures that you can maximize the number of users that opt in, as they can see the benefits of Mellowtel. If you are creating a browser plugin you can follow these instructions. Open your service worker file (also known as background script) and add the following code:

import Mellowtel from "mellowtel";

let mellowtel;

(async () => {
    mellowtel = new Mellowtel("<YOUR_CONFIGURATION_KEY>");
    await mellowtel.initBackground();
})();

chrome.runtime.onInstalled.addListener(async function(details) {
    console.log("Extension Installed or Updated");
    // If you want to handle first install and updates differently
    /**
    if(details.reason === "install"){
        // call a function to handle a first install
    } else if(details.reason === "update") {
        // call a function to handle an update
    }
    **/
    await mellowtel.generateAndOpenOptInLink();
});

2) Custom elements

If you want you can create your own custom opt-in/opt-out elements and handle user’s choice by using the optIn() and optOut() method as shown here.

Custom elements implementation

The methods getOptInStatus(), optIn(), optOut() and start() are accessible from any part of your extension, so you can call them from a popup, a content script, or a background script.To check if the user has already opted in, you can call the getOptInStatus method, which is a promise that resolves to a boolean value.

const hasOptedIn = await mellowtel.getOptInStatus();

Once the user has read the disclaimer and agreed to join the network, call these methods:

await mellowtel.optIn()
await mellowtel.start()

If the user decides to opt out, you can call the optOut method. Mellowtel won’t activate for this user anymore until the user opts in again.

await mellowtel.optOut()

Here is an example of how you can handle user’s choice by using the optIn() and optOut() method in your service worker file.

document.getElementById('go-back-manage-settings-mellowtel').addEventListener('click', function() {
document.getElementById('opt-in-settings').style.display = 'none';
document.getElementById('opt-in-general').style.display = 'block';
});


document.getElementById('manage-settings-mellowtel').addEventListener('click', function() {
document.getElementById('opt-in-settings').style.display = 'block';
document.getElementById('opt-in-general').style.display = 'none';
});


document.getElementById('btn-opted-in').addEventListener('click', function() {
document.getElementById('opted-out-text-div').style.display = 'flex';
document.getElementById('bt_att_homepage_settings').style.backgroundColor = '#CFCFE6';
});

const toggleText = document.getElementById('text-opt');
const toggleButton = document.getElementById('big-toggle-div')

let isOpted = true;

function toggleButtonState() {
if (isOpted) {
    toggleText.textContent = 'Opted out';
    document.getElementById('opted-out-text-div').style.display = 'flex';
    document.getElementById('bt_att_homepage_settings').style.backgroundColor = '#CFCFE6';
} else {
    toggleText.textContent = 'Opted in';
    document.getElementById('opted-out-text-div').style.display = 'none';
    document.getElementById('bt_att_homepage_settings').style.backgroundColor = '#252861';
    }
isOpted = !isOpted ;
}
toggleButton.addEventListener('click', toggleButtonState);
document.getElementById('agree-and-continue-mellowtel').addEventListener('click', function() {
document.getElementById('opt-in-general').style.display = 'none';
});

document.getElementById('save-settings-mellowtel').addEventListener('click', function() {
document.getElementById('opt-in-settings').style.display = 'none';
console.log('isOpted')
console.log(isOpted)
});

Generate settings link

In order to let your users have complete control over their bandwidth, it is required that you leave an easily accessible way for them to change their settings at any moment. You can generate a link by using the built-in method generateSettingsLink(). This method will return a link that will open the Mellowtel settings page where users can decide at any time if they want to opt-in or opt-out. This link should be placed inside the popup, options page or any other place where users can easily access it.

generateSettingsLink() code

This is what the method generateSettingsLink() is doing under the hood:

export function generateSettingsLink(): Promise <string>{
    return new Promise(async (resolve) => {
    let extension_id = await getChromeExtensionIdentifier();
        getIdentifier().then((nodeId) => {
        let configuration_key = nodeId.split("_")[1];
            resolve(
            `${BASE_LINK_SETTING}?extension_id=${extension_id}&configuration_key=${configuration_key}`,
             );
        });
    });
}

Example of a text to use for the update

When you update your extension, you can inform your users about the Mellowtel library and ask them to opt in. Here is a text you could use for the update:

Hi 👋,

Happy to announce an update that will help maintain this extension free and available for everyone...but it requires an action from you.

This new version includes the open-source [Mellowtel](https://www.mellowtel.com/mellowtel-user-guide/) library. Only if you opt-in, this library will let you share your internet bandwidth with companies that use it to access and retrieve data from the Web.

As the developer of this extension, I get a share of the revenue.

Mellowtel shares bandwidth only. Security and privacy are 100% guaranteed and the library is open source for everyone to see.

By opting in now you will help keep this extension free and available for everyone and help me continue to improve it.

You can opt-out at any time and can change your settings whenever you want from the settings page.

If you have any feedback, please feel free to contact us. We are pleased to have you utilizing our service.

Thanks!

You can also link to the Mellowtel User Guide to provide more information to your users in non-technical terms.

Concepts

​Introduction

​1) Recommended implementation

​2) Custom elements

​Generate settings link

​Example of a text to use for the update

Introduction

1) Recommended implementation

2) Custom elements

Generate settings link

Example of a text to use for the update