PopUp module

1. Overview
   The pop-up module allows you to configure and control up to five independent pop-ups within your website. The pop-ups can be displayed on individual pages, in entire folders (including subpages) or throughout the entire website. Each of the five configurations is managed in its own tab within the module.
   
   
2. Prerequisites
   Create pop-up content
   First create the object that is to be displayed later as a pop-up (for example, a page in zCMS with text, images or forms). This object requires a unique object ID, which is entered later in the module configuration.
   
   
3. Access to the configuration
   In the zCMS administration, navigate to Modules → PopUp. There you will find five tabs (PopUp 1 to PopUp 5), each of which contains a separate configuration.
   
   
   
   
4. Configuration of a pop-up
   1. Activation
      Option: Activate pop-up
      Switches the pop-up on or off. If this option is deactivated, the configuration is ignored.
   2. Select pop-up content
      Field: Object ID of the pop-up content
      Enter the object ID of the previously created content object (e.g. 123).
   3. Define display areas
      Field: Object IDs for the display
      Specifies the pages on which the pop-up should appear.
      • Multiple IDs: separate with a semicolon, e.g. 45;78;123.
      • All pages: enter 0.
      • If the ID is a folder, the pop-up appears on all subpages of the specified folder.
   4. Set waiting time
      Field: Waiting time in seconds
      Delay between page call-up and pop-up display (e.g. 5 for 5 seconds).
   5. Determine display frequency
      Field: How often should the visitor see the pop-up?
      • Always: The pop-up appears every time the page is called up.
      • Limited display: A cookie prevents the pop-up from being displayed again for the selected duration.
   6. Time-controlled display
      Fields: From / To
      Time window in which the pop-up is displayed.
      Format: YYYY-MM-DD SS:MM (e.g. 2026-06-15 15:00).
      Note: If both fields remain empty, the pop-up appears at all times. If it is to be displayed time-controlled, both fields must be filled correctly.
   7. PopUp size
      Fields: Width and height (pixels)
      Defines the size of the pop-up. The actual size depends on the content and the available space.
      
      
      
      
      
5. Functionality
   • Page-related display: The delivery of the pop-up is controlled based on the entered object IDs.
   • Cookie control: If the display frequency is limited, a cookie is set to prevent repetitions.
   • Inheritance for folders: If a folder ID is specified, pop-ups also appear automatically on all subpages.
     
     
6. Application examples
   • Announcement of a special offer on all pages (0 as ID).
   • Customised pop-up only on a specific product page.
   • Folder-based display for an entire content area.
   • Time-controlled promotions for events or seasonal campaigns.
     
     
7. Tips
   • Use the waiting time so that the pop-up does not appear immediately when the page is loaded.
   • Use pop-ups sparingly so as not to impair the user experience.
   • Test all settings on a less frequented page before you switch the pop-up live everywhere.

Optimisation settings for performance and display

The optimisation settings include the following functions:

 

1. Cache
   The cache and logging are controlled by this setting. In live mode, the cache should be activated for optimum performance, but deactivated in development mode to make changes visible immediately.
   
   
2. WEBP compression for images
   If this option is activated, all PNG and JPG images are automatically converted to WEBP format. This applies in particular to images that are delivered via show_bild.php and index.php - i.e. around 90 % of all images on the page.
   
   
3. Automatic image compression
   Previously, JPG images were processed by default with a compression rate of 90 % via show_bild.php. Now the compression level can be set directly in the admin interface. The function includes all JPG and WEBP images, including those delivered via index.php. The default value is now set to 80 %.
   
   
4. Maximum image size
   The maximum pixel size for the delivery of images can be set here. The default value is 1,500 pixels. If larger images are to be used for content or e.g. headers, this value must be adjusted accordingly. If an image is inserted that exceeds the maximum size, the server automatically scales it to the specified maximum width or height during delivery. The original image remains unchanged in the system; only the delivered version is scaled down. Smaller images (under 1,500 pixels) remain unaffected unless the image size is explicitly specified, e.g. in the Tiny tool.
   
   
5. Delete image cache
   This function is still available under "Administration -> zCMS" and is offered here again for completeness. Images are processed in zCMS the first time they are called up and saved in a cache directory. If an image has already been converted once, it is loaded directly from this directory without being processed again. After changes to the above parameters, the image cache must be emptied to ensure that the updated settings are applied to all images and that outdated cache versions are not used.

 

Cookie Consent (Free Cookie Consent)

If you add content to zCMS that needs to work with our Cookie Consent Tool, please note the following:

 

1. JavaScript content that is added in the zCMS plug-in fields "Analytics Code" and "Marketing Code" belongs to the category "Targeting" and "Tracking". This content should only be displayed if the visitor agrees to the "Targeting and advertising cookies" and the "Tracking and performance cookies". Please note the information on Google Consent Mode V2 below so that your Google Tag Manager and Analytics tags are stored correctly. You must tag all other scripts yourself. Please follow the instructions below.
2. JavaScript content that you add elsewhere (e.g. metatags or "Appearance => Custom JavaScript code" will NOT be converted automatically. You must adapt these scripts yourself. Please follow the instructions below.
3. If you want to use iFrames such as YouTube or Google Maps with the Cookie Consent Tool, change the attribute "src" to "data-src" in the source code of the iFrame. As soon as the visitor agrees to the cookies, "data-src" is automatically converted back to "src" and the iFrame is loaded.

From 03/2024, according to Google, your script for Adwords, etc. must comply with "Google Consent Mode V2". Please also refer to the instructions below.

 

Display of Cookie Consent Tool

The colours of the button in the Cookie Consent Tool are influenced under "Appearance => Configuration Template => Colours". The Cookie Consent Tool uses the primary colours here. The Cookie Consent Tool is subsequently called up via a "cookie symbol" at the bottom left of the website. Its colours are controlled by the "Top button". You can change these colours under "Appearance => Configuration Template => General".

 

If you have any questions or need help, please contact the support team at the e-mail address provided. We will be happy to assist you at any time.

 

INSTRUCTIONS

HOW TO LABEL YOUR JAVASCRIPT SCRIPTS
https://www.cookieconsent.com/#how_to_tag_your_javascript_scripts

 

HOW TO INTEGRATE GOOGLE CONSENT MODE V2

First, please add the following script so that all services are rejected first

 

<script>
window.dataLayer = window.dataLayer || [];
function gtag(){
dataLayer.push(arguments);
}
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalisation': 'denied',
'analytics_storage': 'denied'
});
</script>

 

Then add your Google code (e.g. Google Tag Manager or Google Analytics). Google then automatically controls the visibility based on the selection in the Cookie Consent Tool:

 

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','YOUR-GOOGLE-TAG-ID');</script>

 

You can find more information at this URL. Please note steps 1 and 2. Step 3 is already integrated in our Cookie Consent Tool and works automatically.

https://www.cookieconsent.com/#how_to_integrate_google_consent_mode_v2

 

COOKIE CONSENS FAQ

https://www.cookieconsent.com/#cookie_consent_faqs

Use DeepL integration

From version 8.12.0, zCMS has a translation interface to DeepL. With the help of the interface, pages, news, appointments, folders and individual pages can be automatically translated into over 20 languages with a single click.

 

Activating DeepL

To use the DeepL interface, you need at least a free DeepL API account and an authentication key for the DeepL API. You can find this in your DeepL API account at deepl.com/pro-api.

 

 

Go to "Administration => Settings => General" and then scroll to "DeepL Translations".

 

Activate the DeepL interface there, select the type of your DeepL API account (a normal DeepL account is not sufficient!) and then enter the authentication key, which you will find in your DeepL API account.

 

 

Using DeepL in the zCMS wizard

Open a page, message, appointment, individual page or folder and switch to the new language. Add the text there in the original language. The best way to do this is to use the copy function ("Copy the content of the default language to the language version ...) at the top of the page.

After you have added the original content, you will find a note about the DeepL interface before the meta information:

 

 

In the screenshot, you are in the Danish language version of the page and can click on "Yes" to automatically translate the content into Danish. After you have clicked on "Yes" and all translations have been carried out in the background, you will receive a success message:

 

 

All text fields and HTML editors on the page have been automatically replaced with the new Danish texts. Now all you have to do is save the page!

Activate multi-language wizard

You can set the file wizard in zCMS so that you can create or edit all language versions in one wizard. To do this, go to "Administration -> Settings -> General" under "File wizard", select the "Multi-language" entry and save the new settings. The new wizard will then be available to you when editing.

 

ZIP version

The "Multi-language" file wizard also gives you the option of uploading a ZIP file with several files for the different languages at once. To do this, the individual files must be named according to the following scheme:

 

File name structure
LANGUAGE_FILENAME.EXTENSION

 

Example with German and English file:
001_header.jpg
002_header.jpg

 

 

ZIP version with JSON _meta.json file

If you add a "_meta.json" file to the ZIP file, you can also upload all data for each language version directly. The JSON file has the following structure:

 

{

"001" : {

"file" : "DATEINAME",

"title" : "TITLE*",

"desc" : "DESCRIPTION",

"html" : "HTML DESCRIPTION",

"hyperlink" : "HYPERLINK",

"date" : "DATE",

"docType" : "DOCUMENT TYPE",

"languages" : ["de", "en", "nl"]

},

"002" : {

"file" : "FILENAME",

"title" : "TITLE*",

"desc" : "DESCRIPTION",

"html" : "HTML DESCRIPTION",

"hyperlink" : "HYPERLINK",

"date" : "DATE",

"docType" : "DOCUMENT TYPE",

"languages" : ["de", "en", "nl"]

},

...

}

 

This data is used to automatically save the fields "Title", "Description", etc. with the values of the JSON file.

You can define a "speaking URL" for each page in the zCMS. Normally, the zCMS automatically creates URL addresses according to the following scheme:

 

DOMAIN/LANGUAGE/ID/TITLE.htm

 

Here is an example:

If we create a page with the title "Contact" on the domain www.newcms.de in "English" and this page has the object ID "34", the automatic URL would look like this:

 

https://www.newcms.de/en/34/contact.htm

 

There is nothing wrong with this URL. However, it would be prettier if the ID "134" did not exist. This is where the "speaking URLs" come into play. For each folder or page, you can create your own URL in the "SPEAKING URL" field in the object's edit mode. However, you only have access to the area after the "DOMAIN" and the "LANGUAGE". Please also note the rules and restrictions of this feature, which are listed at the bottom of this article.

 

 

If you enter "contact.htm" in the field "SPEAKING URL" in our example, then the URL for the page is now:

 

https://www.newcms.de/en/contact.htm

 

Please also note that the "/en" in our examples is only available if you have activated the option "Activate prefix for languages" under "Administration -> Settings -> General". This is not necessary for single-language sites. But it is mandatory for multilingual websites!

 

Folder structure starts with v8.5

Since version 8.5, folder structures can also be created with the "speaking URLs". Let's show the possibilities with an example:

 

You have a product folder with several products and would like to create URLs like https://www.newcms.de/en/products/pocketwatch.htm and https://www.newcms.de/en/products/writstwatch.htm. To do this, enter "products/pocketwatch.htm" and "products/wristwatch.htm" under "SPEAKING URL". The part "products" can be different everywhere and has nothing to do with the an existing folder "products". Each "speaking URL" is completely independent. This gives you complete freedom in naming your " speaking URLs".

 

Update for folder structure from 8.20

No postfix (e.g. .htm) needs to be added to a directory structure. This makes it possible to use "products/product1". IMPORTANT: "products/product1/" does not work. The URL must not be ended with a /.

 

products/watches.htm => CORRECT
products/watches/ => ERROR
products/watches => CORRECT

 

 

Important notes

There are strict rules for " speaking URLs". Only in this case they work. Furthermore, if you do not follow the rules, it is possible that parts or the entire website will no longer be accessible. Therefore, please take great care to comply with these rules:

 

1. Each "speaking URL" must be unique. The same "speaking URL" may not be used again. Not even in another language version.
2. A "talking URL" is not allowed to start with "/".
3. No special characters or umlauts may/should be used in a talking URL.
4. It is not allowed to have a sequence of numbers between two "/"s and at the beginning
   123/products/watches.htm => ERROR
products/123/watches.htm => ERROR
products/watches123.htm => CORRECT
5. No spaces are allowed in a "speaking URL
   products/mans watches.htm => ERROR
products/mans-watches.htm => CORRECT
6. Each " speaking URL " must have a file extension. We recommend .htm or .html
products/watches.htm => ERROR
products/watches.htm => CORRECT
7. Please be careful with upper and lower case letters. We recommend to write the entire "speaking URL" in lower case