Page Builders + GrassBlade xAPI Companion

We get these most common questions about page builder support:

• Which page builder plugins are compatible with GrassBlade xAPI Companion?
• How do I add xAPI or SCORM Content on a page builder?
• Can I use a free page builder or do I need the pro version?

In this guide, you will get all your answers related to WordPress page builders and GrassBlade xAPI Companion.

Supported Page Builders

GrassBlade xAPI Companion supports almost every page builder plugin whether it is free or paid. However, we tested the following most popular plugins and will focus on how you can use them.

1. Gutenberg Editor
2. Elementor
3. Divi
4. Beaver Builder
5. WPBakery
6. Visual Composer
7. Brizy

If you didn’t see your builder plugin in the above list, it doesn’t mean GrassBlade xAPI Companion does not support it. You can still try it and if you’re facing any issues feel free to contact us.

Assign xAPI Content to Page

To add xAPI Content on any page with edited using page builder, first, you have to assign content on that page.

Note: Gutenberg and Elementor users do not need to do this process.

Step 1:
Go to WordPress edit page, not page builder edit page like Edit with Elementor.

Step 2:
Look for meta box called xAPI Content on right side of the screen.

Step 3:
Select your content and click the update button assign it on the page. You have successfully assigned your xAPI Content on this page.

Add Content on page builders

We will use [grassblade] shortcode or available block to show xAPI Content in page builder editor.

Gutenberg Editor

Step 1:
On the edit page, click the (+) icon to add a block on your page and search for xAPI Content block.

Step 2:
From the right side of the screen, select the xAPI Content using the drop-down. Click the Update button to save.

Elementor

Step 1:
On Elementor editor, search for xAPI Content widget and add it on the page where you want to show the content.

Step 2:
Now select the xAPI Content from the left side menu you want to add on this page.

DIVI

Step 1:
On DIVI editor page, add Textbox block on the page where you want to show the content.

Step 2:
Replace the sample text with [grassblade] shortcode to move the xAPI Content to the desired place in the page. By default, it will show at the bottom of the page.

Beaver Builder

Step 1:
On Beaver Builder editor, add HTML block/widget at the place where you want to show the content.

Step 2:
In HTML input field, add [grassblade id = 123] shortcode with content ID. You can find this shortcode on the xAPI Content edit page. Click on the image to enlarge.

WPBakery Page Builder

Step 1:
On the WPBakery builder edit page, add the Text Block where you want to show the content.

Step 2:
Replace sample text with [grassblade] shortcode. On the editor page, it may show content at the bottom of the page, but on the frontend, it will show the content where you add the shortcode.

Visual Composer

In Visual Composer, it automatically shows content at the bottom of the page when you assign the xAPI Content. Currently, you cannot move it anywhere on the page. We will try to include a quick fix in our future updates.

Brizy

Step 1:
Add shortcode widget on the page where you want to show the content.

Step 2:
Enter [grassblade id = 123] shortcode in the input field. You can find this shortcode on the xAPI Content edit page.

We are planning to add blocks/widgets for popular page builders, you will receive it in the future updates. Keep checking this space for more updates related to the page builders.

If you’re facing any issue while using a page builder feel free to contact us.