Dev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunitySubmit a ticketLog In
GitHubNuGetDev CommunitySubmit a ticket


## What Is DotLiquid?

DotLiquid is an HTML templating engine used in <<product-name>> website views. Additional info can be found at [DotLiquid markup](🔗).

## How does Optimizely <<product-name>> use DotLiquid?

For <<product-name>> versions 4.2 and prior, all views were implemented in Razor, which allows developers access to any .net code as well as our libraries. Beginning with <<product-name>> 4.3, access to the filesystem and backend libraries is restricted in order to support our SaaS based product, <<product-name>> Cloud. As a result, <<product-name>> only allows standard HTML and DotLiquid in website views. This still gives developers access to the objects provided to the view and allowing for basic HTML templating.

️ Important

The syntax and documentation found for standard DotLiquid will work except for one difference: the default {{ }} syntax has been replaced by \[\[ \]\] in an effort to avoid conflict with Angular code, which is frequently used in <<product-name>> views.

## <<product-name>> DotLiquid tags

<<product-name>> has several custom tags to help facilitate common functionality.

### EmailRegex

Renders an angular compatible regex for validating emails.



### NavigationMenu

Renders the navigation menu.

\[% navigationMenu %\]

### PartialView

Renders partial views from .WebProject/Themes/\[ThemeName\]/Views/Directives/\[FolderName\]/\[ViewName\].



Note

FolderName is optional

### PhoneRegex

Renders an angular compatible regex for validating phone numbers.



### SiteMessage

Gets a message from the MessageProvider with the message name as the first argument in quotes (single or double are both valid). Optionally it takes a default value as a second string argument. If it is used within single quotes in html it takes an optional last parameter named "EscapeSingleQuotes" that will escape all single quotes in the message returned.



### Translate

Translates the provided string value using the TranslationLocalizer. If it is used within single quotes in html it takes an optional last parameter named "EscapeSingleQuotes" that will escape all single quotes in the message returned.



### UrlForPage

Renders a url for the page type specified. The first argument is the Page type. ie HomePage, CartPage, OrderDetailPage



### Zone

Renders the html required to define a zone.



## Custom DotLiquid tags

DotLiquid provides the ability to create custom tags. To do this, you need to create a class that inherits from the DotLiquid.Tag class. You can use the "Create your own tags" section at <a href="https://github.com/dotliquid/dotliquid/wiki/DotLiquid-for-Developers" class="external-link">DotLiquid for Developers</a> as a reference.

  1. Create a class that inherits from **DotLiquid.Tag**. Use the **Initialize** method to validate and capture arguments. Use the **Render** method to write content for the custom tag. Below is an example of a custom tag that prints the first argument inside an **\<h1>** element.

    
  2. Next, you need to register your custom tag with DotLiquid, so it can properly parse and render it within any views. You can register your custom tag in the PostStartup method of the **\~/App_Start/Startup.cs** file using the following code.

    
  3. Finally, rebuild your solution. You should now be able to use your custom tag in a view.