Adding an opt-out option

Trackboxx works without requiring users to opt in.

Even so, we want to give our customers the option of offering visitors an opt-out.

What does opt-out mean in this case?

A small script lets you display an opt-out switch or button.

The switch is enabled by default. If a visitor turns it off, their visits will no longer be tracked.

This allows visitors to opt out of tracking on the website.

Once added, the button looks like this:

Adding the opt-out option

The opt-out script is already included in our Trackboxx privacy policy template. You can find it HERE.

The following section explains how to add the script separately.

There are two ways to add the opt-out option to your website: manually or via the Trackboxx plugin, which is currently available for WordPress.

Option 1 – Manual setup

Copy the following code and replace the tracking ID with your own.

You’ll find your tracking ID in the Trackboxx dashboard under Settings (cogwheel) > Websites. Click “Tracking code” next to the relevant website.

Code:

<label class="tb-switch">
<input type="checkbox" data-domain="TB-XXXXXXXXXXXX" id="tbTrackingAllowed" value="true"/>
<span class="tb-slider tb-round"></span>
</label>
<span id="trackingStatus">Allow Tracking</span>
<script type="text/javascript">
function tbInitTrackingCheckBox(id) {
var checkBox = document.getElementById(id);
var statusText = document.getElementById(trackingStatus');
checkBox.checked = trackboxxHelper.trackingEnabled();
statusText.textContent = checkBox.checked ? 'My visitor data is included in the web analysis..' : 'My visitor data is not included in the web analysis.';
checkBox.onclick = function () {
this.checked ? trackboxxHelper.enableTracking() : trackboxxHelper.enableTracking('no');
statusText.textContent = this.checked ? 'My visitor data is included in the web analysis..' : 'My visitor data is not included in the web analysis.';
};
}
document.addEventListener("tbScriptLoaded", function () {
tbInitTrackingCheckBox('tbTrackingAllowed');
});
</script>Code language: HTML, XML (xml)

Add this section to your privacy policy, ideally alongside the Trackboxx privacy policy text.

Use the following CSS to display the toggle button correctly:

.tb-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

/* Hide default HTML checkbox */
.tb-switch input {
opacity: 0;
width: 0;
height: 0;
}

/* The slider */
.tb-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background colour: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.tb-sliderbefore {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background colour: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .tb-slider {
background colour: #2196F3;
}

input:focus + .tb-slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked + .tb-sliderbefore {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.tb-slider.tb-round {
border-radius: 34px;
margin-right:5px;
}

.tb-slider.tb-roundbefore {
border-radius: 50%;
}Code language: CSS (css)

Option 2 – WordPress plugin

If you use the Trackboxx WordPress plugin, you do not need to add the CSS manually. Copy the opt-out code from the plugin settings and paste it into your privacy policy.

This guide explains the separate setup. The opt-out is already included by default in our privacy policy template.