Note: Content Blocks support the use of SG tags. Remember that SG tags are Selligent-specific HTML tags that allow configuration of the layout and content through a properties panel and make it language dependent. When these tags are added and the Content Block is used in a message, the user will be able to configure these SG tags directly in the message. This means that the same Content Block used multiple times in the same message or in different messages can have different content for these SG tags. This can typically be used to create multilingual content.
The following tags can be added:
- <sg:content id="" />
- <sg:button id="" />
- <sg:image id="" />
- <sg:text id="" />
- <sg:barcode id="" />
- <sg:video id="" />
Example: We have a Content Block with three SG tags. When this Content Block is used in a message, the SG tags will be listed and the user can edit the content. A preview of the SG tag is shown. If the SG tag has content defined in it, that will be displayed in the preview. If no content has been defined yet, an icon is displayed with the name of the SG component.
In addition, the following sg tag can be added: <sg:head id="" />.
An <sg:head> tag will place all of its content in the <head> HTML section of your message in which the Content Block will be used later on, and is for example used to define <style> tags or <script> tags with certain content.
This sg tag is treated differently from the others, as all sg:head tags will be rendered at the bottom of the head-section in the message. When multiple sg : head tags have been detected, in a single Content Block or multiple Content Blocks, they are all rendered sequentially. The order of the Content Blocks in the message determines the order in which they are rendered.
Example of <sg:head> usage:
We have three Content Blocks (in the Library chapter of Selligent).
- A first Content Block CB_style_h1_and_h2_tags, containing an sg:head tag with styling for h1 and h2 headers.
- A second Content Block CB_div_with_styling_applied, containing a div with id="heading" and h1 and h2 elements as child elements, and specific styling for these h1 and h2 tags in the heading id parent tag (+ styling for other elements not used right now).
- A third Content Block CB_background_CSS, containing an sg:head tag with styling for the background of the entire message.
In the message (in the Content chapter of Selligent), the three Content Blocks are added.
Additionally, a Text component is added in which text is styled as h1 heading, h2 heading, and paragraph text.
When previewing the message, the applied sg:head stylings become visible :
- The pink background-color for h1, and the dotted red border for h2 are visible for all h1 and h2 headers, outside and within the div with id="heading" (sg:head styling coming from the first Content Block CB_style_h1_and_h2_tags).
- The h1 and h2 headers within the div with id="heading" have additional styling applied, such as the font-style, text-shadow and padding (sg:head styling coming from the second Content Block CB_div_with_styling_applied).
- The entire message has a beige background color (sg:head styling coming from the third Content Block CB_background_CSS).
For some SG tags used in Content Blocks, you can set any style option through attributes in the tag.
Example: <sg:image id="my_img" alt="alternative text" style="width:100px" />
The following attributes are supported for the following SG tags:
| SG:image |
src — the source of the image |
| SG:button | href — the button link text — button text style — style options such as width |
| SG:content | style — style options such as width |
| SG:video | poster — Image to be shown when the video is downloading or until the user clicks the play button src — The source of the video href — The video link img — The fallback image style — Style options such as width |
| SG:spacer | style — Style options such as width |
| SG:barcode | barcodetype — The type of barcode. You can choose from Ean-13, Code39, Code128 or QR value — What will be encoded to generate the barcode (example: "mailto:support@somecompany.com") Personalization can be included as well, e.g. "https://discount.shop/basket.asp?visitor=[% MASTER.ID %]" alt — The text to be displayed if the selected barcode cannot be shown. orientation — It defines the barcode orientation on the page. You can choose between: Normal, Turn 90 Left, Turn 90 Right and Turn 180. fontsize — The font of the barcode text in pixels width — The width of the barcode in pixels height — The height of the barcode in pixels borderwidth — The width of the border in pixels version — Only for QR codes. The selected version defines the overall dimensions of the symbol. A value from 1 to 40 is expected errorcorrectionlevel — Only for QR codes (More details here) style — Alignment (Left, Right, Center) |
Note: When you set an attribute on an SG component in the Content Block, it becomes read-only when the Content Block is used in the message. Changes to the style options in the Content Blocks will be reflected in the messages using these Content Blocks.
More information on the use of Content Blocks with SG-tags can be found in this topic.
