Snippets are an easy way to create components that can be used across your site.
Use Case Information
Snippets are elements you can create using a text editor. They can be simple plain text and images or you can create branded elements to be used again and again in your content creation. Snippets are most useful when used as a jumping off point or foundation, meaning they are no longer connected to the snippet interface once they are added to a WYSIWYG. This allows for easy templating. For example, you can use snippets to store elements in articles that you need to use often, but may need to be slightly different for each article, like Notes, Tips, and Warnings.
When configured you can control the following:
- Insert snippets into any WYSIWYG editor.
- Quickly update the snippet text and code to best suit the page.
- Build a template bank of reusable assets.
Creating a Snippet
Using Snippets, you can easily add the HTML for a Note to the article, then further update what the Note is communicating by customizing the Note snippet you added to the WYSIWYG, as shown below.
- From your homepage, click Courses.
- Click Settings.
- Click Snippets.
- Click Add Snippet.
- Add a label (for your reference on the Snippet management page).
- Add the body of the Snippet. This is the actual Snippet you will have access to from any WYSIWYG editor in your site.
- Click Save.
Tip
For easy management, consider creating code classes to reference in Snippets. That way you can update the styling in one place (site CSS) and have it affect your Snippets that reference those classes.
Tip
Common places to use Snippets:
- Content Authoring: Add snippets to any text block on content pages.
- Designing Layouts and Pages: Add snippets to any WYSIWYG editor in widgets, like the Single Column widget.
Editing, Duplicating, and Deleting Snippets
You can edit, duplicate, or delete existing snippets for easy management.
Note
Snippets you have inserted into content or widgets do not have any connection to the original snippet - it is simply a way to add a jumping off point to WYSIWYG editors. This means that updates to an existing Snippet do not flow through to where you've used the Snippet.
However, if Snippets are referencing CSS Classes and you update the CSS Class from site CSS, that change will reflect across your Snippets.
- From your homepage, click Courses.
- Click Settings.
- Click Snippets.
-
To Edit: Click the Pencil Icon to edit a Snippet.
- Make sure to Save any changes.
-
To Duplicate: Click the Copy Icon to duplicate a Snippet.
- The Label field will add "Copy" to the end of the original value by default. You can always update the Label to whatever you desire.
- Make sure to Save your new Snippet.
-
To Delete: Click the Trash Icon to delete a Snippet.
- Confirm deletion by clicking Yes.
- Confirm deletion by clicking Yes.
Adding Snippets to Content
Snippets can be added anywhere there is a WYSIWYG editor.
- From your homepage, click Courses, then All Courses.
- Click on Content Title.
- Once you're in a course outline or editing an article or video, locate the Snippets Icon in the WYSIWYG where you'd like to place a Snippet.
Snippets Icon: - Click the Snippets Icon, then click Insert next to the Snippet you want to place in the WYSIWYG.
- Update the Snippet as needed. Text or HTML code can be modified here to create exactly what you need for this specific content.
- Click Save.
Adding Snippets to Layouts and Pages
- From your homepage, click Design, then Layouts.
- Choose any layout to edit.
- Click Actions, then Edit.
- Once you've chosen a layout to design, locate the Snippets Icon in the WYSIWYG where you'd like to place a Snippet.
Snippets Icon: - Click the Snippets Icon, then click Insert next to the Snippet you want to place in the WYSIWYG.
- Update the Snippet as needed. Text or HTML code can be modified here to create exactly what you need for this specific content.
- Click Save.
Tip
Any widget with a WYSIWYG can use Snippets, like the Single Column widget.