The first important part is of course the design – the parts that go around the contents. A web page generally contains a header, a menu, a footer, and the main contents area. But, obviously, the possibilities for design are pretty much unlimited.

When you drag an existing snippet on your page and insert it as a Shared Content, it will simply create the article element pointing to the script source file. Whenever output is generated (in any context), Connect replaces the article tag with the contents of the snippet.

The source code when adding the snippet looks like this:

<article source="snippets/my_snippet.html"></article>

In a connect Web template, you can try to create a snippet named ‘my_snippet.html’ (containing any HTML code) and insert the above code (in the Source tab). The result will appear (once the snippet is saved) by clicking on the Live tab.

In order for a script to be able to interact with the article element, it must be identified. Generally, a simple ID should suffice:

<article id="body_contents" source="snippets/my_snippet.html"></article>

You can add the ID from the Attributes Pane or directly in the source.

The script that makes the magic work is a single line, so it’s really straightforward. Create a new Script (not a text script or otherwise) where the selector targets the article element, in this case simple #body_contents

The script below calls a dynamic snippet that’s based on a language tag. It assumes there are snippets named “contents-fr.html”, “contents-en.html”, etc and a record field called “language” with the value being “fr”, “en”, etc.

results.loadhtml("snippets/contents-" + record.fields.language + ".html");

Easy enough, right? I love simple stuff. But what about external snippets somewhere on the drive? That’s just as simple, you just need the full path to the file on the drive!

results.loadhtml("file:///d:/projectfiles/campain01/snippets/contents-" + record.fields.language + ".html");

Aaaand bingo, you’re done! Personally, I love to do this for web templates where the snippet is called using a variable coming from the Workflow module.