The Magento Extension injects Flows in web sections using Magento's Widget System. It's possible to integrate Flows through 2 methods: by creating a Flowbox Widget in the Widgets section and assigning it to a specific container, or by directly inserting it a specific CSM page through the Page Builder.
Method A: Use as a Widget
Method A: Use as a Widget
Widgets in Magento allow us to introduce our content in predetermined sections according to our installed Theme. The Widgets can be found in: Content > Elements > Widgets
Settings
Click on the "Add Widget" button on the top right corned to create a new Widget, and select the "Flowbox Flow" option for the "Type" selector.
As for the "Design Theme" selector, select the current Theme of your Magento store. This will load its available positions for Widget injection. When this is done, click on the "Continue" button.
The following page is comprised of 2 sections, Storefront Properties and Widget Options.
Storefront properties
Widget title (required): The name that will identify the Widget in the list. We recommend that it's related to its function or placement.
Assign to Store Views (required): Select the Store views in which the Widget will be active. You can select multiple store views by using CTRL + Click on Windows, or CMD⌘ + Click on Mac. If you just want the Widget to appear on all available Stores, you can click on "All Store Views" instead.
Sort Order: Widget position relative to the rest of Widgets available in the same container. It's only required if you're using multiple instances of Widgets in the same container.
In the Layout Updates section you can select the placement in which the Widget will be displayed. Click on the "Add Layout Update" button, where the following dialog will be displayed:
Display on: Select the Page in which the Flowbox Widget will be inserted.
Container: Select the Page's Container in which the Flowbox Widget will be inserted.
The options available in these selectors depend on your installed Theme, and may vary depending in your Store.
Widget Options
In the Widget Options section, you will need to fill the following form:
Flow: The available options are "Default" or "Dynamic Product Flow". We only recommend to use the option "Dynamic Product Flow" when creating a Flow in your Product Page.
Flow key: Your Flow's key. You can retrieve it in the Flowbox platform by going to the "Flows" section, clicking on the suspension point icon and clicking on "Copy Flow Key".
Show Tags (Yes/No): Allows you to add Tags in your Flow, so you can filter its content to only display posts that have those Tags assigned. When using multiple Tags, make sure to separate them by semicolons (;).
Once the Widget's configuration is complete, make sure to click on the "Save" button.
Method B: Page Builder
Method B: Page Builder
Go to Content > Elements > Pages and access the desired CMS page in which you want to integrate the Flow.
Under the Content collapsible tab, click on the "Edit with Page Builder" button. Select or create a new Text box, and then click on the "Widget" icon:
In the following section, select the "Flowbox Flow" option for the "Type" selector.
You will need to fill the following form:
Flow: The available options are "Default" or "Dynamic Product Flow". We only recommend to use the option "Dynamic Product Flow" when creating a Flow in your Product Page.
Flow key: Your Flow's key. You can retrieve it in the Flowbox platform by going to the "Flows" section, clicking on the suspension point icon and clicking on "Copy Flow Key".
Show Tags (Yes/No): Allows you to add Tags in your Flow, so you can filter its content to only display posts that have those Tags assigned. When using multiple Tags, make sure to separate them by semicolons (;).
Once the Widget's configuration is complete, make sure to click on the "Insert Widget" button. The Flowbox widget will be inserted in the Text box you selected:
