What are tags and filters?

Tags are used to include event attributes such as name, country, province, etc.

Filters are simple methods that modify the output of strings and tags on notifications. They are placed within an output tag {{ }} and denoted by a pipe character |.

In the following example, the tag is the first name of a customer:

add filters to social proof notifications

In this example, the circled part is the highlight filter:

add filters to social proof notifications

How to include tags?

You can add the tag(s) you want to include by clicking on the options below:

add tags to social proof notifications

How to include filters?

To include a filter, simply add a  | (pipe) after the name of the tag, then space (optional), and then the filter name. Filters are optional, used to customize the notifications. Example:
 {{ tag_name | filter_name }}

Multiple filters can also be applied to one tag:
 {{ tag_name | filter_1 | filter_2 }} 

In the example below, multiple filters - title, link, highlight are included manually to customize the notification. (Find the detailed information about the filters below.)

add filters to social proof notifications

List of filters to use in Social Proof notifications

1. Show random output from one of the provided arguments in case the tag value is empty

Fallback filters:

fallback   default   defaults 

The fallback filter returns one of the provided arguments randomly in case of the tag value is empty.

 {{ tag_name | fallback: value 1, [value 2, ...] }}

Example:

input: {{ first_name | fallback: Someone, New buyer, A visitor, Lorenzo, John, Maria, Felix }}  
output:   A random argument

add filters to social proof notifications

The fallback ( default and defaults ) filter accepts additional arguments to customize the output.

What are arguments?

Arguments are included by adding a symbol after the name of the filter, then space (optional), and then argument value. To provide multiple arguments just separate them with a comma.

Example:
{{ tag_name | fallback: arg1, arg2, arg3 }}

  • Note: arguments are displayed randomly.


If the argument itself contains any of | (pipe), : (colon), , (comma), { } (curly brackets), then argument must be quoted (single or double quotes).

Example:
{{ tag_name | fallback: "arg|ument," "argument:", "argument)", "{arg}ument", "argument, argument" }}

OR:

{{ tag_name | fallback: 'arg|ument,' 'argument:', 'argument)',

'{arg} {ument', 'argument, argument' }}

The fallback filter has two additional alias (alternatives): default and defaults.

The following examples are the same:
 {{ tag_name | fallback: value }}

add filters to social proof notifications

{{ tag_name | default: value }}

social proof notification customization

{{ tag_name | defaults: value }}

social proof notification customization

2. Show output in uppercase

Uppercase filters:  
 upcase    uppercase 


Example: consider the  first_name value as  Trace

input:  {{ first_name | upcase }}
output:  TRACE

social proof notification customization

3. Show output in lowercase

Lowercase tags:  
 downcase    lowercase 


Example: consider  first_name value as  Trace

input:  {{ first_name | downcase }}
output:  trace

social proof notification customization

4. Capitalize the output

Capitalization tag:
 capitalize  


Example: consider the  title value as  Blue tech sneakers

input:  {{ title | capitalize }}
output:  Blue Tech Sneakers

social proof notification customization

5. Show all the first letters of the output in lowercase

Example: consider the title value as Blue Tech Sneakers

input: {{ title | capitalize | downcase }}

output: blue tech sneakers

social proof notification customization

6. Show only the initial letters of the output

Initial letters tag:
 initials  

Get the first letter of each word and concat them to format the output text.

Example: consider the  title value as  Blue Tech Sneakers

input:  {{ title | initials }}
output:  BTS

social proof notification customization

7. Show only the first letter of the output

First letter tag:  
 first_letter  

Example: consider the  title value as  Blue Tech Sneakers

input:  {{ title | first_letter }}
output:  B 

social proof notification customization

8. Mask the output

Mask tags:
 mask: *, 0, 0  

Mask the value. Has 3 arguments and all of the optional. 

argument 1: Mask symbol. Must be single character  defaults to  *
argument 2: Number of the characters that must be left as unmasked at the beginning of the string. Defaults to 0. Must be positive integer
argument 2: Number of the characters that must be left as unmasked at the end of the string. Defaults to 0. Must be a positive integer

Example: consider the  title value as  Blue Tech Sneakers

input:  {{ title | mask }}
output:  ***************** 

social proof notification customization

Example: consider the title value as Blue Tech Sneakers

input:  {{ title | mask: *, 3, 2 }}
output:  Blu************rs

social proof notification customization

Example: consider the title value as Blue Tech Sneakers

input:  {{ title | mask: ., 0, 2 }}
output:  ...............AG 

social proof notification customization
  • Note: you can also use these filters for customers' names. In the following example,

Consider the first_name value as Justine:

input: {{first_name|fallback:Someone | mask: ., 0, 2}}

output: .....ne

social proof notification customization
  • Note:  If the sum of the second and third arguments is bigger than the length of the value the output will be unmasked. 

9. Trim the name of the output before an argument

Trim before tag:  
 trim_before  

The filter shortens the product name. Requires one delimiter argument. Truncates (shortens) the string before the first occurrence of the delimiter.

  • Note: trimming includes the added argument.

Example: considering the  title value as Blue Tech Sneakers

input:  {{ title | trim_before: Tech }}
output:  Sneakers

social proof notification customization

10. Trim the name of the output after an argument

Trim after tag:  
 trim_after  

The filter shortens the product name. Requires one delimiter argument. Truncates (shortens) the string after the first occurrence of the delimiter.

  • Note: trimming includes the added argument.


Example: considering the  title value as  Blue Tech Sneakers

input:  {{ title | trim_after: Tech }}
output:  Blue

social proof notification customization

11. Highlight the output

Highlight tag:  
 highlight  

Use a highlight filter to highlight the tag or some portion of the string. You can include an optional argument as the background color. Argument value must be valid CSS color.

  • HEX, RGB, and RGBA color codes are supported.

Example:

input:  {{ first_name | highlight }}

highlight social proof notification

input:  {{ first_name | highlight: #fff6d3 }}

highlight social proof notification

input:  {{ first_name | highlight: 'rgb(255, 230, 230)' }}

Note: RGB color code must be single or double-quoted.

highlight on social proof notifications

input:  {{ first_name | highlight: "rgba(179, 215, 255, 0.3)" }}

Note: RGBA color code must be single or double-quoted.

highlight on social proof notifications
  • Note: you can also use filters for title:

highlight social proof notification
  • Note: you can also use filters for title and first_name at the same time:

highlight social proof notification

12. Add and customize links on the Social Proof notifications

You can add random or custom links to Social Proof notifications alongside highlight filters.

Random link:
 link  

Makes the tag output clickable. The Default link address is the value of the tag. But you can provide a custom link address as the first argument of the filter. 

The second optional argument is for the target. You can use one of the following values:

Link opens in the same tab:
_self

Link opens in the new tab:

_blank

Link opens in the parent frame:

 _parent

Link opens in the full body of the window:

_top

  • Note: You can replace the position of the first and second arguments. So for example, if you want to open the link with the default address in the tab just include _blank as a first (and single) argument.

Example: consider the  title value as  Blue Tech Sneakers,  and the  link value as  https://a.com/tech-sneakers

input:  {{ title | link }}
output: a randomly linked document "Blue Tech Sneakers":

add link to social proof notification

input:  {{ title | link: https://a.com/tech-sneakers }}
output: custom linked document  "Blue Tech Sneakers":

add link to social proof notification

input:  {{ title | link: https://a.com/tech-sneakers, _blank }}

or, {{ title | link: _blank, https://a.com/tech-sneakers }}
output: linked document - "Blue Tech Sneakers" opens in the new tab:

add link to social proof notification

input:  {{ title | link: _blank }}
output: a randomly linked document - "Blue Tech Sneakers" opens in the new tab:

add link to social proof notification

input: {{ title | link: _parent }}

output: a randomly linked document - "Blue Tech Sneakers" in the parent frame:

add link to social proof notification

input: {{ title | link: _top }}

output: a randomly linked document - "Blue Tech Sneakers" opens in the full body of the window:

add link to social proof notification

What happens if you have a typo in filters or invalid tags?

Typos in any filters:

Typos in any filters will be ignored, and the output will be the original value

input: {{title | trimm_after: Tech}}

output: original value

social proof notifications

Invalid tag name within an output:
If the tag name within an output tag {{ }}  is not valid, then it will be used as a string. The following example is valid.

input:  {{ invalid tag name }}
output:  empty 

social proof notifications
  • Note: if you use this kind of invalid tag, then the tag name must be quoted (single or double quotes).

input: {{ "invalid tag name" }}
output: invalid tag name

social proof notification customization
  • Note: if you use this kind of invalid tags and it contains any of | (pipe), : (colon), , (comma), { and } (curly brackets) symbols, then the tag name must be quoted (single or double quotes)

Did this answer your question?