Guide for Site Modifiers

Site modifiers can be used to update text elements on your landing page with social proof data. For example, you can use Site Modifiers to make your landing page more persuasive by replacing call-to-action from  "Join our newsletter" to another variant augmented with social proof like "Join 45,500 other marketers".


How to setup site modifier?

After adding a new site modifier, click on code block icon to locate widget loader linked with site modifier.

On widget loader page, select linked loader and click Show Code Snippet. Copy the code and paste it before the </body> tag of your site. 


Elements

You can specify HTML elements that you want to modify for site. 

Selector

In order for us to know which element to modify, you need to provide us with element's CSS selector. Provided CSS selector should look something like  #app > div > div > div.hero > div > div > h1 . OnVoard will use document.querySelector to query for elements with provided selector value.

See this guide if you are not sure how to get CSS selector for HTML element.

Pulse Endpoint

Pulse endpoint is required for us to get social proof data used for replacing text. Transformed value of endpoint will be available as {{value}} macro.

Inner Text Template

Template to replace text elment.  {{value}} macro is available. For example, if pulse endpoint's transformed value is 45,500 and template is Join {{value}} other marketers , output will be Join 45,500 other marketers 


Rules

You can use rules to set conditions for elements modification. This allows you to only override elements when you have social proof data that can make your content more persuasive. For example, let's say we set  Min Count to 1000.

  • If pulse result is 500, element will not be modified.
  • If pulse result is 1500, element will be modified.

FAQs for Site Modifier

How do I fix content flickering for Site Modifier?

You may encounter content flickering issue when using site modifier, see workaround for content flickering issues.

Why Site Modifier script is always loaded asynchronously?

If you are familiar with A/B testing tools, some of them would recommend loading their scripts synchronously to get around the problem of content flickering. However, OnVoard always load Site Modifier script asynchronously. This is because Site Modifier can be used to modify externally hosted scripts like pop-ups or forms that are also served asynchronously. 

For example, you may want to modify the title of email-capture form (served by external vendors) from "Join our newsletter" to something more convincing like "Join 52,500 marketers who have received valuable tips every week". If you load Site Modifier synchronously, we still have to wait until email-capture vendor's script is loaded before we can modify the title.

Do I need to take extra measures to ensure the Site Modifier script gets loaded last?

There's no need to take any extra measures. Our script will periodically check and detect if there's a need to modify elements. So even if Site Modifier script gets loaded before the content it intends to modify, things will still work!