Opt In / Opt Out

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 unused 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 the Mellowtel Network.

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.

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.

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 to everybody...but it requires an action from you!

This new version includes the open-source [Mellowtel](https://www.mellowtel.com/mellowtel-user-guide/) library. If you opt-in, this library will let you share your unused internet with trusted AI labs & startups who use it to train their models.

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

By opting in now, other than helping maintain this extension free and available, you will be eligible to be in the beta version and start earning for your unused internet too. In case you change your mind, you can opt out at any time from [INSERT OPTION HERE]

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

It doesn't collect, share, or sell personal information (not even anonymized data). It’s also highly regulated: Mellowtel keeps communicating with Chrome Web Store regulators to guarantee a safe experience and enforce compliance.

Thanks!

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

Get Started

Browser plugins

Flutter

Guides

Concepts

Introduction

1) Recommended implementation

2) Custom elements

Generate settings link

Example of a text to use for the update

Get Started

Browser plugins

Flutter

Guides

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