Skip to main content

How to embed widgets between the content text or body text of a page or email blast

FOREWARNING: This is a very complex 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.  

Our listing of Architects can be found at nationbuilder.com/architects.

Completed

Official response from

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 inbetween two paragraphs of your content? Like this:

 

 

 Here's text!

-SPLIT-

Here's more text!

 

 

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).

 

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

-SPLIT-

 

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". Here's the code that I used:
-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:
-SPLIT-

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.

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 inbetween two paragraphs of your content? Like this:

 

 

 Here's text!

Here's more text!

 

 

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).

 

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

 

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". Here's the code that I used:


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:


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.

Complete and current information on how to use NationBuilder is available on the Support page.

Share this post

Showing 9 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.