{"id":2191,"date":"2024-05-02T19:44:33","date_gmt":"2024-05-02T17:44:33","guid":{"rendered":"https:\/\/trackboxx.com\/?post_type=helpcenter&#038;p=2191"},"modified":"2025-08-28T15:09:23","modified_gmt":"2025-08-28T13:09:23","slug":"integration-optout","status":"publish","type":"helpcenter","link":"https:\/\/trackboxx.com\/en\/helpcenter\/integrierung-optout","title":{"rendered":"Integration Optout"},"content":{"rendered":"<div class=\"wp-block-stackable-icon-box stk-block-icon-box stk-block stk-1769608 stk-block-background\" data-v=\"2\" data-block-id=\"1769608\"><style>.stk-1769608 {background-color:#fcf8e3 !important;box-shadow:0 5px 5px 0 #123f5209 !important;border-style:solid !important;border-color:#f9f0c3 !important;border-left-width:8px !important;}.stk-1769608:before{background-color:#fcf8e3 !important;}<\/style><div class=\"stk-block-content stk-inner-blocks stk-block-icon-box__content stk-container stk-1769608-container stk--no-background stk--no-padding\">\n<div class=\"wp-block-stackable-icon-label stk-block-icon-label stk-block stk-15cfef8\" data-block-id=\"15cfef8\"><style>.stk-15cfef8 .stk-inner-blocks{gap:40px !important;}.stk-15cfef8 {margin-bottom:0px !important;}@media screen and (max-width: 1023px){.stk-15cfef8 .stk-inner-blocks{gap:40px !important;}}@media screen and (max-width: 767px){.stk-15cfef8 .stk-inner-blocks{gap:40px !important;}}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content\">\n<div class=\"wp-block-stackable-icon stk-block-icon has-text-align-left stk-block stk-ad0c7ec\" data-block-id=\"ad0c7ec\"><style>.stk-ad0c7ec .stk--svg-wrapper .stk--inner-svg svg:last-child{height:24px !important;width:24px !important;}.stk-ad0c7ec .stk--svg-wrapper .stk--inner-svg svg:last-child, .stk-ad0c7ec .stk--svg-wrapper .stk--inner-svg svg:last-child :is(g, path, rect, polygon, ellipse){fill:#fcb900 !important;}<\/style><span class=\"stk--svg-wrapper\"><div class=\"stk--inner-svg\"><svg style=\"height:0;width:0\"><defs><lineargradient id=\"linear-gradient-ad0c7ec\" x1=\"0\" x2=\"100%\" y1=\"0\" y2=\"0\"><stop offset=\"0%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-ad-0-c-7-ec-color-1)\"><\/stop><stop offset=\"100%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-ad-0-c-7-ec-color-2)\"><\/stop><\/lineargradient><\/defs><\/svg><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\" aria-hidden=\"true\" width=\"32\" height=\"32\"><path d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z\"><\/path><\/svg><\/div><\/span><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-6dfbac1\" id=\"wichtig\" data-block-id=\"6dfbac1\"><h4 class=\"stk-block-heading__text\">Important<\/h4><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-7f19526\" data-block-id=\"7f19526\"><p class=\"stk-block-text__text\">Important! To include the opt-out option, you must use the latest version of the Trackboxx tracking script!<\/p><\/div>\n<\/div><\/div>\n\n\n\n<p>Based on the functionality of Trackboxx, fundamentally no opt-in is necessary.<\/p>\n\n\n\n<p>Nevertheless, we would like to offer our customers the option of providing an opt-out function.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Briefly explained - what does opt-out mean in our case?<\/h2>\n\n\n\n<p>You can use the opt-out function to display a \"switch\/button\" via a small script.<\/p>\n\n\n\n<p>This is activated by default. However, if this is deactivated by the website visitor, their visits are no longer tracked.<\/p>\n\n\n\n<p>The customer can therefore object to the tracking on the respective website.<\/p>\n\n\n\n<p>The button looks like this after integration:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/trackboxx.com\/wp-content\/uploads\/2024\/05\/toogle-info-image.webp\"><img fetchpriority=\"high\" decoding=\"async\" width=\"777\" height=\"99\" src=\"https:\/\/trackboxx.com\/wp-content\/uploads\/2024\/05\/toogle-info-image.webp\" alt=\"\" class=\"wp-image-2192\" title=\"\" srcset=\"https:\/\/trackboxx.com\/wp-content\/uploads\/2024\/05\/toogle-info-image.webp 777w, https:\/\/trackboxx.com\/wp-content\/uploads\/2024\/05\/toogle-info-image-300x38.webp 300w, https:\/\/trackboxx.com\/wp-content\/uploads\/2024\/05\/toogle-info-image-768x98.webp 768w, https:\/\/trackboxx.com\/wp-content\/uploads\/2024\/05\/toogle-info-image-18x2.webp 18w\" sizes=\"(max-width: 777px) 100vw, 777px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Integration of the opt-out<\/h2>\n\n\n\n<p class=\"translation-block\"><strong><em>Fundamentally, the respective script for the opt-out is already in the template for the Trackboxx privacy statement. You can find it \u00a0<a href=\"https:\/\/trackboxx.com\/en\/helpcenter\/do-i-need-to-change-my-privacy-policy\/\" target=\"_blank\" rel=\"noopener\">HERE.<\/a><\/em><\/strong><\/p>\n\n\n\n<p><strong><em>Nonetheless, an overview of the separate integration of the script shall be provided here again.<\/em><\/strong><\/p>\n\n\n\n<p>In the following, we describe to you two ways to integrate the opt-out into your website. Once completely manually and once via the Trackboxx plugin (currently available for WordPress).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Option 1 - Manual Integration<\/h2>\n\n\n\n<p>Use the following code and adjust your tracking ID in the first step.<\/p>\n\n\n\n<p><strong><em>You can find these by clicking on Settings (cogwheel) &gt; Websites in the Trackboxx dashboard. You will find the \"Tracking code\" button behind the websites you have created.<\/em><\/strong><\/p>\n\n\n\n<p><strong>Code:<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"tb-switch\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"checkbox\"<\/span> <span class=\"hljs-attr\">data-domain<\/span>=<span class=\"hljs-string\">\"TB-XXXXXXXXXXXX\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"tbTrackingAllowed\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"true\"<\/span>\/&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"tb-slider tb-round\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"trackingStatus\"<\/span>&gt;<\/span>Allow Tracking<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">tbInitTrackingCheckBox<\/span>(<span class=\"hljs-params\">id<\/span>) <\/span>{\n<span class=\"hljs-keyword\">var<\/span> checkBox = <span class=\"hljs-built_in\">document<\/span>.getElementById(id);\n<span class=\"hljs-keyword\">var<\/span> statusText = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">trackingStatus'<\/span>);\ncheckBox.checked = trackboxxHelper.trackingEnabled();\nstatusText.textContent = checkBox.checked ? <span class=\"hljs-string\">'My visitor data is included in the web analysis..'<\/span> : <span class=\"hljs-string\">'My visitor data is not included in the web analysis.'<\/span>;\ncheckBox.onclick = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\"><\/span>) <\/span>{\n<span class=\"hljs-keyword\">this<\/span>.checked ? trackboxxHelper.enableTracking() : trackboxxHelper.enableTracking(<span class=\"hljs-string\">'no'<\/span>);\nstatusText.textContent = <span class=\"hljs-keyword\">this<\/span>.checked ? <span class=\"hljs-string\">'My visitor data is included in the web analysis..'<\/span> : <span class=\"hljs-string\">'My visitor data is not included in the web analysis.'<\/span>;\n};\n}\n<span class=\"hljs-built_in\">document<\/span>.addEventListener(<span class=\"hljs-string\">\"tbScriptLoaded\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\"><\/span>) <\/span>{\ntbInitTrackingCheckBox(<span class=\"hljs-string\">'tbTrackingAllowed'<\/span>);\n});\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You can simply integrate this section into your privacy statement - ideally as an extension to the Trackboxx privacy statement.<\/p>\n\n\n\n<p>Please use the following CSS so that the \"toogle button\" is displayed graphically correctly:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.tb-switch<\/span> {\n<span class=\"hljs-attribute\">position<\/span>: relative;\n<span class=\"hljs-attribute\">display<\/span>: inline-block;\n<span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">60px<\/span>;\n<span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">34px<\/span>;\n}\n\n<span class=\"hljs-comment\">\/* Hide default HTML checkbox *\/<\/span>\n<span class=\"hljs-selector-class\">.tb-switch<\/span> <span class=\"hljs-selector-tag\">input<\/span> {\n<span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0<\/span>;\n<span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">0<\/span>;\n<span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">0<\/span>;\n}\n\n<span class=\"hljs-comment\">\/* The slider *\/<\/span>\n<span class=\"hljs-selector-class\">.tb-slider<\/span> {\n<span class=\"hljs-attribute\">position<\/span>: absolute;\n<span class=\"hljs-attribute\">cursor<\/span>: pointer;\n<span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">0<\/span>;\n<span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">0<\/span>;\n<span class=\"hljs-attribute\">right<\/span>: <span class=\"hljs-number\">0<\/span>;\n<span class=\"hljs-attribute\">bottom<\/span>: <span class=\"hljs-number\">0<\/span>;\n<span class=\"hljs-attribute\">background colour<\/span>: <span class=\"hljs-number\">#ccc<\/span>;\n<span class=\"hljs-attribute\">-webkit-transition<\/span>: .<span class=\"hljs-number\">4s<\/span>;\n<span class=\"hljs-attribute\">transition<\/span>: .<span class=\"hljs-number\">4s<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.tb-slider<\/span><span class=\"hljs-selector-pseudo\">before<\/span> {\n<span class=\"hljs-attribute\">position<\/span>: absolute;\n<span class=\"hljs-attribute\">content<\/span>: <span class=\"hljs-string\">\"\"<\/span>;\n<span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">26px<\/span>;\n<span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">26px<\/span>;\n<span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">4px<\/span>;\n<span class=\"hljs-attribute\">bottom<\/span>: <span class=\"hljs-number\">4px<\/span>;\n<span class=\"hljs-attribute\">background colour<\/span>: white;\n<span class=\"hljs-attribute\">-webkit-transition<\/span>: .<span class=\"hljs-number\">4s<\/span>;\n<span class=\"hljs-attribute\">transition<\/span>: .<span class=\"hljs-number\">4s<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">input<\/span><span class=\"hljs-selector-pseudo\">:checked<\/span> + <span class=\"hljs-selector-class\">.tb-slider<\/span> {\n<span class=\"hljs-attribute\">background colour<\/span>: <span class=\"hljs-number\">#2196F3<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">input<\/span><span class=\"hljs-selector-pseudo\">:focus<\/span> + <span class=\"hljs-selector-class\">.tb-slider<\/span> {\n<span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">1px<\/span> <span class=\"hljs-number\">#2196F3<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">input<\/span><span class=\"hljs-selector-pseudo\">:checked<\/span> + <span class=\"hljs-selector-class\">.tb-slider<\/span><span class=\"hljs-selector-pseudo\">before<\/span> {\n<span class=\"hljs-attribute\">-webkit-transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(<span class=\"hljs-number\">26px<\/span>);\n<span class=\"hljs-attribute\">-ms-transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(<span class=\"hljs-number\">26px<\/span>);\n<span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(<span class=\"hljs-number\">26px<\/span>);\n}\n\n<span class=\"hljs-comment\">\/* Rounded sliders *\/<\/span>\n<span class=\"hljs-selector-class\">.tb-slider<\/span><span class=\"hljs-selector-class\">.tb-round<\/span> {\n<span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">34px<\/span>;\n<span class=\"hljs-attribute\">margin-right<\/span>:<span class=\"hljs-number\">5px<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.tb-slider<\/span><span class=\"hljs-selector-class\">.tb-round<\/span><span class=\"hljs-selector-pseudo\">before<\/span> {\n<span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Option 2 - WordPress Plugin<\/h2>\n\n\n\n<p>If you are using the Trackboxx WordPress Plugin, you do not need to integrate the CSS yourself. In the settings of the Trackboxx Plugin, you will find the opt-out code, copy it and insert it accordingly into your privacy statement.<\/p>\n\n\n\n<p>As mentioned, this guide should describe the integration of the opt-out again separately. In the section for your privacy statement, it is already integrated by default.<\/p>","protected":false},"featured_media":0,"template":"","categories":[],"tags":[27],"class_list":["post-2191","helpcenter","type-helpcenter","status-publish","hentry","tag-helpcenter-plugins-integrationen"],"acf":[],"_links":{"self":[{"href":"https:\/\/trackboxx.com\/en\/wp-json\/wp\/v2\/helpcenter\/2191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trackboxx.com\/en\/wp-json\/wp\/v2\/helpcenter"}],"about":[{"href":"https:\/\/trackboxx.com\/en\/wp-json\/wp\/v2\/types\/helpcenter"}],"version-history":[{"count":0,"href":"https:\/\/trackboxx.com\/en\/wp-json\/wp\/v2\/helpcenter\/2191\/revisions"}],"wp:attachment":[{"href":"https:\/\/trackboxx.com\/en\/wp-json\/wp\/v2\/media?parent=2191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trackboxx.com\/en\/wp-json\/wp\/v2\/categories?post=2191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trackboxx.com\/en\/wp-json\/wp\/v2\/tags?post=2191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}