Bocs is in early stages and we have not tested all Page Builders Themes & Plugins. To see a list of compatible themes see this article here
How to Display with Gutenberg
Navigate to the page you want to display your subscription box.
Add a new block and search for 'Bocs Widget'
(To learn more about adding WP content blocks see here).
Move the Bocs Widget up or down to the desired section of your page.
Click the small drop down and select either the single Bocs or the Collection Widget.
You can also use the Bocs shortcode located in the sidebar on your Wordpress edit page.
How to Display Bocs with WPBakery (Visual Composer)
Open the page you want to add the Widget to and add a Raw HTML element
In WPBakery, add a Raw HTML block to the section where you want the widget to appear.Paste the Embed Code
Add the following code inside the Raw HTML block:<div id="bocs-widget" data-id="YOUR_ID_HERE" data-url="https://hudaq97o4b.execute-api.ap-southeast-2.amazonaws.com/prod" data-bocs-id="" class="wp-block-woocommerce-bocs-bocs-widget"></div>
Find Your Bocs or Collection ID
In the Bocs app, go to either the Bocs or Collections page, depending on what you're embedding.
Click on the item you want to use to open its drawer.
Then click the View button (or View Page if you're editing).
Copy the ID shown in the URL. For example - https://v2.bocs.io/widget/2dbf3095-d9fd-4ab8-b7fb-eed7708b1a8b
Or if you are editing your Bocs widget remove the '/edit' part of the URL. For example - https://v2.bocs.io/widget/2dbf3095-d9fd-4ab8-b7fb-eed7708b1a8b/edit you would just use the bolded content.
Update the Code with Your ID
ReplaceYOUR_ID_HEREin the code above with your actual Bocs or Collection ID.
How to Display with Visual Composer
Open the page you want to add the Widget to and add a Raw HTML element
In WPBakery, add a Raw HTML block to the section where you want the widget to appear.Paste the Embed Code
Add the following code inside the Raw HTML block:<div id="bocs-widget" data-id="YOUR_ID_HERE" data-url="https://hudaq97o4b.execute-api.ap-southeast-2.amazonaws.com/prod" data-bocs-id="" class="wp-block-woocommerce-bocs-bocs-widget"></div>
Find Your Bocs or Collection ID
In the Bocs app, go to either the Bocs or Collections page, depending on what you're embedding.
Click on the item you want to use to open its drawer.
Then click the View button (or View Page if you're editing).
Copy the ID shown in the URL. For example - https://v2.bocs.io/widget/2dbf3095-d9fd-4ab8-b7fb-eed7708b1a8b
Or if you are editing your Bocs widget remove the '/edit' part of the URL. For example - https://v2.bocs.io/widget/2dbf3095-d9fd-4ab8-b7fb-eed7708b1a8b/edit you would just use the bolded content.
Update the Code with Your ID
ReplaceYOUR_ID_HEREin the code above with your actual Bocs or Collection ID.
Related Articles