GDPR compliant external Content

Why a Shortcode?

Using a shortcode is the most versatile way to ensure availability across the entire WordPress ecosystem.

• Universal Compatibility: Shortcodes work seamlessly across the Classic Editor, Gutenberg (Block Editor), and popular page builders like Beaver, Bricks, Divi, Elementor, Oxygen, WPBakery, and many more.
• Theme Flexibility: Unlike hard-coded scripts, shortcodes can be placed within widgets, sidebars, or custom templates, ensuring functionality regardless of the theme’s layout.
• Simplicity & Speed: It provides a lightweight, “copy-paste” solution that allows to trigger complex logic without needing to write a single line of code.
• Future-Proof: Even if the theme or editor is changed, the shortcode remains functional, keeping the external content visible without extra configuration.
• Granular Control: Thanks to dozens of parameters within the shortcode, the appearance and functionality – such as dimensions, texts, meta data – can be controlled precisely on a per-video basis.

id

The id parameter allows you to assign a custom HTML ID to this consent dialog.
This is useful in certain scenarios for specifically targeting the dialog using CSS or JavaScript.

alt / title

The alt and title parameters set the corresponding HTML attributes for the outer consent block.
The alt attribute is used to support search engines and accessibility, the title attribute provides the tooltip text.

Sample:

[ma-content-consent alt="External Content" title="External Content"] ... [/ma-content-consent]

container-style

The container block has basic CSS styles assigned by default:

display: flex;
flex-direction: column;

The shortcode parameter container-style can be used to override these CSS styles or add more.

Sample:

[ma-content-consent container-style="min-height: 300px;"] ... [/ma-content-consent]

container-class

If multiple container blocks are to have an identical design, CSS classes can be assigned with the container-class parameter. 

Sample:

[ma-content-consent container-class="my-consent-container featured"] ... [/ma-content-consent]

notice-style

The notice block, containing the privacy text and the button, has basic CSS styles assigned by default:

position: relative;
isolation: isolate;
flex: 1;
padding: 1em;
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 2em;
justify-content: center;
background-color: #efefef;
border: 1px solid lightgray;
text-align: center;

The shortcode parameter notice-style can be used to override these CSS styles or add more.

Sample:

[ma-content-consent notice-style="color: maroon;"] ... [/ma-content-consent]

notice-class

If multiple notice blocks are to have an identical design, CSS classes can be assigned with the notice-class parameter. 

Beispiel:

[ma-content-consent notice-class="my-consent-notice featured"] ... [/ma-content-consent]

block-style

This parameter was previously used for the design of the container and has now been replaced by container-style.
If this parameter is still defined from the previous use of the snippet, it overwrites container-style and notice-style for compatibility reasons.

block-class

This parameter was previously used for the design of the container and has now been replaced by container-class.
If this parameter is still defined from the previous use of the snippet, it overwrites container-class and notice-class for compatibility reasons.

gdpr-text

MA Content Consent defines a notice text about the privacy policy in different languages:

The language is selected based on your website’s or page language. Polylang is supported.
If no default text is available for your page’s language, English is selected instead.

The text in curly brackets is replaced with a link to the privacy policy page configured in WordPress (Settings > Privacy), with the text in brackets serving as the link text.

The notice text can be customized to your own requirements, for example other languages, via parameter gdpr-text.

[ma-content-consent gdpr-text="Please read our |privacy policy} before clicking."] ... [/ma-content-consent]

text-style

The notice text has no CSS styles assigned by default.

Using the text-style shortcode parameter, these CSS styles can be added.

Sample:

[ma-content-consent text-style="color: firebrick; font-weight: 900;"] ... [/ma-content-consent]

text-class

If text in multiple consent blocks are to have an identical design, CSS classes can be assigned with the text-class parameter. 

Sample:

[ma-content-consent text-class="my-text featured"] ... [/ma-content-consent]

button-text

MA Content Consent provides the button label in different languages:

The language is selected based on your website’s or page language. Polylang is supported.
If no default text is available for your page’s language, English is selected instead.

The notice text can be customized to your own requirements, for example other languages, via parameter button-text.

Sample:

[ma-content-consent button-text="Load Map"] ... [/ma-content-consent]

button-style

The button has basic CSS styles assigned by default:

margin-inline: auto;
width: fit-content;
border-style: none;
border-radius: 1.5em;
background-color: #333;
padding: 0.5em 1em;
color: white;
text-decoration: none;

You can use the button-style shortcode parameter to customize the button’s design.

Sample:

[ma-content-consent button-style="background-color:#2a4b9b; padding:2px 10px; border-radius:5px;"] ... [/ma-content-consent]

button-class

If buttons in multiple consent blocks are to have an identical design, CSS classes can be assigned with the button-class parameter. 

Sample:

[ma-content-consent button-class="my-button primary"] ... [/ma-content-consent]

background-image

With the shortcode parameter background-image, a background image can be assigned to the notice container.
The parameter accepts a URL or a media ID.

Samples:

[ma-content-consent background-image="/wp-content/..."]
...
[/ma-content-consent]

[ma-content-consent background-image="1234"]
...
[/ma-content-consent]

background-style

The background area has basic CSS styles assigned by default::

z-index: -1;
position: absolute;
inset: 0;
opacity: .5;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;

The shortcode parameter background-style can be used to override these CSS styles or add more.

Included Background Images

MA Content Consent already provides some integrated background images for typical use cases. These can be assigned using tags in the format @name.

[ma-content-consent background-image="@form"]
Beispiel-Inhalt
[/ma-content-consent]

[ma-content-consent background-image="@play"]
Beispiel-Inhalt
[/ma-content-consent]

[ma-content-consent background-image="@video"]
Beispiel-Inhalt
[/ma-content-consent]

[ma-content-consent background-image="@waveform"]
Beispiel-Inhalt
[/ma-content-consent]

[ma-content-consent background-image="@world""]
Beispiel-Inhalt
[/ma-content-consent]