Customising it

Categories and wording#

Categories, their descriptions and the cookies each one clears are in Settings → Cookie Consent. The four shipped categories — necessary, preferences, analytics, marketing — cover most sites; edit the wording to match how you actually use them.

Look#

The notice uses CSS variables, so a few lines in your theme are enough:

.dxcc, .dxcc-dialog {
  --dxcc-accent: #0f766e;       /* the accept button and the switches */
  --dxcc-radius: 4px;
  --dxcc-font-size: 15px;
  --dxcc-width: 420px;
}

Dark mode follows the page automatically. To force one, set Theme in the settings.

The blocked-embed placeholder is yours too:

[data-cc-placeholder] {
  min-height: 220px;
  background: url(/wp-content/uploads/video-placeholder.jpg) center / cover;
}

[data-cc-placeholder]::after {
  content: 'Allow marketing cookies to watch this';
}

Filters#

// Add classes, translations or anything else the widget accepts.
add_filter( 'devix_cookie_consent_config', function ( array $config ): array {
    $config['options']['classNames'] = [ 'banner' => 'my-theme-card' ];
    $config['options']['translations'] = [
        'ar' => [ 'title' => 'ملفات الارتباط', 'acceptAll' => 'قبول الكل' ],
    ];
    return $config;
} );

// Do something of your own when a decision is stored.
add_action( 'devix_cookie_consent_recorded', function ( array $record ): void {
    if ( in_array( 'marketing', $record['categories'], true ) ) {
        my_crm_allow_email( $record['id'] );
    }
} );

// Change how a blocked tag is written.
add_filter( 'devix_cookie_consent_blocked_script', function ( string $tag, string $handle, string $category ): string {
    return $tag;
}, 10, 3 );

In your own templates#

if ( \DevixCookieConsent\Consent::current()->allows( 'marketing' ) ) {
    // Print the embed as itself.
}

A category the visitor has already allowed is printed as an ordinary tag, because the cookie is read in PHP — there is no blocking round trip at all.

In JavaScript#

// The widget instance, for your own buttons.
window.dxConsent.showPreferences();
window.dxConsent.accepted('analytics');

// React to a change without a reload.
document.addEventListener('devix:consent', (event) => {
  console.log(event.detail.record.categories);
});

The consent log#

Settings → Cookie Consent lists the most recent decisions, and the table is {prefix}devix_consent_log. Old rows are deleted daily according to the retention you set; 0 keeps them for ever. The IP is stored as an HMAC with this site's salt, never in the clear.