All Collections
How to embed a widget or image between content text in a page or email blast
How to embed a widget or image between content text in a page or email blast
Updated over a week ago

⚠️ This is an advanced workaround that requires knowledge of Liquid and HTML. If you would like to use this on a page and cannot implement it yourself, please consult a NationBuilder-certified Architect

When you need to embed a widget, iframe or any type of code onto a page, it is easy enough to click into the "Template" tab of that page and paste the code directly above or below the liquid tag for the page's content (or the 'body' if it's an email blast). Instructions on doing that can be found here.

Doing this will place your widget directly above or directly below the text/photos that you've entered into the "Content" tab of that page.  But what if you want to display your widget in between two paragraphs of your content? Like this:

The solution is a bit more complicated, but totally possible. In short, we will need to capture the liquid "Content" object as a string using the liquid capture tag and split that string using the liquid split filter.  Then we will hide the default content liquid tag and instead enter a number of other content tags, divided by a keyword (which is defined by the 'split' filter).

1Capture the "body" or "content" liquid object as a string. In my example, we'll call the string body  and use this code to do it:

{% capture body %}{{ page.basic.content }}{% endcapture %}

2. Create a new array of the different body parts , separated by a keyword.  In my example, this array is called body_parts  and the keyword is SPLIT :

{% assign body_parts = body | split: 'SPLIT' %}

Then, in the content section of your page (or the body section of your email), type your text like normal but place the keyword in places where you would like your other content to show up. Example:

3. Replace the normal "Body" or "Content" liquid objects with this:

{{ body_parts[0] }}

  <!-- Your widget code here -->

{{ body_parts[1] }}

Note: Because the split creates an array from the pieces, and arrays start at 0, the portion before your split keyword will be 0. In other words, body_parts[0]  calls the first section of the body, body_parts[1]  calls the second section of the body, and so on. The content that you would like to appear between your sections of text should be placed in between the different body_parts  liquid objects, as shown above.

Did this answer your question?