SMT HTML Content Type

This topic applies to

Applies to

Commerce Web Stores | Site Management Tools

 

 

The HTML content type lets you place HTML, JavaScript, or other code on the pages of your site. You can use this feature for any code that can reside between the <body></body> tags on the page. You cannot use HTML content type for any code that must be placed in the <head></head> tags of the page.

Warning

Do not use document.write() when creating scripts for your site. Iit creates conflicts for the page life cycle and breaks your site.


When you add HTML content to an area, the HTML settings are displayed in the side panel. The HTML settings give you two different views for adding and editing your HTML content. These are the basic view and the editor view. You can toggle between the two views by clicking expand/collapse, denoted by two opposing arrows, in the upper right corner of the editor. The basic view gives you a simple text area for entering your HTML code:

Note

If you use CSS from an external site in the HTML code, you may experience a brief page flicker while the site is loading.


The editor view gives you an expanded side panel and an HTML editor with syntax highlighting:

Examples of HTML content type include:

  • Custom HTML

  • Forms

  • Social media widgets

Note

Any changes including additions, edits, or deletions, must be published before they are available on the site.


Using the Hyperlink tag in HMTL Code

A hyperlink lets you link to a file or document in another location by clicking on a highlighted word or image on the screen. This could include a link to a Word document, PDF, or image. When you use the hyperlink tag in the HTML Content area in SMT you must add an additional attribute to the CCT code. You must add target=”_blank” inside the <a> tag.

Here is example HTML code:

<a href="/site/images/Test.pdf" download="TEST PDF"><img src="/site/images/test_image.jpg" /></a>

For the link to work correctly, add target”_blank”:

<a href="/site/images/Test.pdf" download="TEST PDF" target="_blank"><img src="/site/images/test_image.jpg" /></a>

Whether the link is automatically downloaded, or opens in a new tab, depends on the users browser settings.

To add HTML content:

  1. Go to the page where you want to add HTML content.

  2. Click Add on the site management toolbar.

  3. Drag the HTML content from the side panel and place it in the desired area on the page. When you drop the content, the HTML Settings display in the side panel.

  4. Set the content visibility options. See Visibility Dates.

  5. You can enter your HTML code or JavaScript in the HTML code field in the side panel or click expand to expand the editor and enter your code.

    The HTML content on the page updates in real time as you enter code.

  6. Add tags to the tag field. See Content Tags and Filter Tools.

  7. Click Save.

To edit HTML content:

  1. Go to the page that contains the HTML content you want to edit.

  2. Point to the HTML content and click Edit. This highlights the content and displays the HTML settings in the side panel.

  3. Make your changes to the code.

  4. Click Save.

To remove HTML content:

  1. Go to the page that contains the HTML content you want to remove.

  2. Point to the HTML content and click Remove. This displays a message box that asks if you want to expire the content.

  3. Click OK.

See Discard Content Vs Expiring Content.

Alternative to document.write()

Do not use document.write() when creating scripts for your site, because it creates conflicts for the page life cycle and breaks your site. As an alternative, create an element and set its innerHTML.

The following depicts an example script:

<span id='suiteElement'></span> <script> var suiteElement = document.getElementByld('suiteElement'); if (suiteElement) { suiteElement.innerHTML = 'I Love HTML Content!'; } </script>

Related Topics