Scripts-Placeholders
With the Scripts-Placeholders plugin, you can create and insert placeholders for elements that occupy a fixed position on the website. Knowledge of HTML, CSS, and optionally JavaScript is required to use this plugin. One example of its use would be to create a placeholder for a map inserted via JavaScript. If the map is then blocked, a placeholder will appear in its place instead of a blank area.
Overview of Existing Placeholders
All placeholders you’ve created are listed here one below the other. In the overview, you’ll see the name you chose, the linked embed, the status, and the options for editing or deleting the placeholder.
New placeholders can be created using the green button labeled Create Entry. You will be redirected to the creation form, where you must first enter the basic information.
Basic Information
These two fields must be filled out in order to save a placeholder.
Name
Here you define the name of the integration. The name is used solely for your own reference and has no effect on the front end.
Integration
To create a placeholder, you must first have an integration for which you want to create a placeholder. Clicking the field will display a list of all created integrations.
Active
Here you can enable and disable the placeholder.
Content
The content is the heart of the plugin. Here you define—depending on the use case—the appearance and/or behavior of the placeholder. You have three options for creating the content as a placeholder. All three options can be used simultaneously or in combination.
HTML
To display text content in the placeholder, you can insert HTML here. CSS-classes from the website can be used here as well and do not necessarily have to be created in CCM19.
Placement
You have three placement options available. Depending on the use case, it is recommended to use the appropriate option. These are:
Single Placeholder – At the end of a - tag
Use this option if the element does not have a fixed position within the <body>. An example of this would be a live chat that scrolls along with the page.
Multiple placeholders – After elements that match the selector
Use this option if you have elements that can be placed in both the <head> and the <body> scripts. An example of this would be Google Maps.
Multiple placeholders – By script - tags containing the text
Use this option if the elements you want to block appear multiple times in the <body>. An example of this would be elements from social media platforms.
Text Blocks
Once created, text blocks can be inserted into the HTML-area under the Text Blocks tab using a defined expression enclosed in curly braces. This allows you to create texts across languages and duplicate them as often as needed. The created text blocks are listed with their defined expressions and can be placed in the "HTML" field by copying and pasting. Select the desired language and add both a name and the corresponding text. The text should correspond to the language. The name remains the same in all languages and is not displayed in the frontend.
Actions
To allow the user to perform one of two actions on the front end, load-embedding (hides the placeholder and then loads the embed) or more-info (opens the details for the linked embed), you must add the attribute data-placeholder-action to an element in your HTML-code. For example, here’s what that looks like for a video:
CSS
You can write CSS specifically for this placeholder. The code will only be applied to the HTML-code of the placeholder.
JavaScript
Would you like a JavaScript action to be executed after the embedding is approved? If so, you can enter the corresponding commands in this field. IMPORTANT: Do not enter any HTML here.
Display Conditions
Display conditions allow you to activate the placeholder only on specific days of the week or at specific times.
Time-Based Display
Use the "Add Restriction" button to define new restrictions. You can then specify the exact time periods.
Templates
Google reCAPTCHA: recaptcha-placeholder-v3.zip
Google Maps: googlemaps-placeholder-v1.zip