Breadcrumbs

HTML Component

Custom HTML code can be added by using the HTML custom component. It is available from the Designer Components list.


Design:

6a8d5b2a-8c48-4b57-92a4-06f7c4ec413b#media-blob-url=true&id=9b6eb037-55f8-4872-ab2e-93096311dd56&contextId=98180&collection=

Tag is added:

ff90f6f5-983a-491b-bf54-d625ca6d65b7#media-blob-url=true&id=637ca9f7-74d6-464e-ae5a-f44ca2ebfa4d&collection=&contextId=98180&mimeType=image%2Fpng&name=image-20220711-064156.png&size=14316&height=158&width=1618&alt=

When opened to edit:

 

4268ade4-645c-48a4-be32-4affc59aab29#media-blob-url=true&id=7480f613-a8f0-41db-b9e4-f6eab3e07ef7&collection=&contextId=98180&mimeType=image%2Fpng&name=image-20220711-075018.png&size=20967&height=272&width=1876&alt=

Designer:

  • The left panel should have a 'Custom' treeview group with an HTML component according to the designs.

  • Add an HTML element to the email. It should be draggable for email element reordering.

  • Element always has collapsed view as the first state.

  • To open component edit, click on the ‘click to edit' button.

  • After the user finishes text editing, the element should be deselected to save it.

  • If users don’t want to save the latest changes, just press the ‘escape' button.

Editor:

  • The user should be able to edit the value. The Content Designer needs to activate the 'Show field in editor mode’ switch inside the Designer right panel settings tab.

  • The component click to edit button inside the editor is not visible in preview mode, only in edit mode.

  • After applying changes, you can watch the result inside the document source page. The code should be saved inside the div block with the code-container CSS class.

696fb365-a40d-457e-b05a-913a49ae7fe3#media-blob-url=true&id=8c2d64e1-db91-4de2-8ec9-f77e33e36b29&contextId=98180&collection=

Textarea restrictions - set cursor position by mouse click (need to use ➡ ⬅ ⬆ ⬇ ), text selection my mouse move (need to use shift + ➡ ⬅

Preview: On “Preview”, the HTML tag is not visible as it is not intended for the end user

Document in Editor (preview):

b0170a8c-3b93-4309-bb5c-69a19b136b57#media-blob-url=true&id=5c91ff9a-1c96-492a-850c-17f11d169997&contextId=97881&collection=

 

375583a8-11b3-4a6b-bb40-5b3209eaa4cb#media-blob-url=true&id=ecb120c6-a3dc-4cb0-a33b-1d53dba2b0b6&collection=&contextId=97881&mimeType=image%2Fpng&name=image-20221129-145202.png&size=24644&height=784&width=1795&alt=

Please note that from the source editor, it has always been possible to add custom code https://help.activator.cloud/sup/how-to-use-the-source-editor-and-manually-edit-mjm