Flexitive's Legal Widget is built to allow users to add an interactive component to their designs. The component can be set to expand and collapse on user interaction, and is designed to hold legal text relating to the design.

In the design below, you can click thebutton to expand and collapse the widget.

Legal Widgets are available under Flexitive Enterprise subscriptions. Contact your account manager or support@flexitive.com to add Legal Widgets to your site. 

Building a Legal Widget

To add Legal Widget to your design, open the Widgets panel on the left-hand side of the editor, then click Legal.

After you've added the Legal Widget to your canvas, you can re-position and re-size the widget on the canvas. The size and position you set for the legal widget in the editor will be the position and size the widget will take before any user interaction. To set the position and size of the widget after user interaction, use the 'Expanded and Collapsed' options for the widget.

Editing the Contents of a Legal Widget

When you add a Legal widget to a design, the widget will include 2 embedded pages; the Header and the Body of the Widget. In the context of a Flexitive widget, we call these embedded pages Child Pages. To edit the contents of a Legal Widget, you'll need to edit the Child Pages for the design.

By default, the Header of a Legal Widget will be blank and transparent. The Body of a Legal Widget will be black and contain placeholder text. To edit the content of either the Header or Body, save your design and click the Design-ID for the page you'd like to edit in the Legal Settings Panel.

Clicking the Design-ID will open the editor for the page. Once you're in the editor for the pages you'd like to use, edit the contents of the page, and save your work.

To return back to your design, save your work and click on the Design-ID on the left of the breadcrumb in the top-left corner of the page. 

Expansion Settings

In the Legal Widgets, you can set the widget up to expand or collapse to different sizes on the canvas. The Widget can be set to expand either on a timer using the Delay Resize option or on user interaction using the Toggle Resize option. To turn on either resize option, use the toggles in the Legal Settings panel.

In a Legal Widget, the Toggle Resize option will be set to ON by default, while the Delay Resize option will be set to OFF.

Toggle Resize

When Toggle Resize is ON, you will see options for the position of both the Expanded and Collapsed states of the Legal Widget.

Each state contains a mock display of your canvas. The area covered by the grey transparent wash represents the part of the canvas covered by either the expanded or collapsed state of the widget. To make changes to the final expanded and collapsed size, use the Green tags to adjust how you would like the widget to re-size. You will be given real time feedback for the percentage of the canvas that both the expanded and collapsed state will occupy.

Delay Resize

Turning on Delay Resize cause the widget expand on a timer. The delay from the start of the design to the widget expanding can be set using the Time slider shown below.

The Expanded Position box provided functions in exactly the same way as with the Toggle Resize option. 

Editing Your Buttons

When Toggle Resize is set to 'ON', your widget will include a button to allow for the expansion and collapsing of your widget. To edit the size and position of the button, use the 'Toggle Button' settings in the Legal Settings panel.

Under the Toggle Button settings, you can change the size of the button using the Size setting. The button's size is measured in pixels on the canvas. You can also set the position of the button using the 'Margin' options. By changing the 'Top/Bottom' and 'Left/Right' toggles, as well as the margin between the button and the edge of the widget, you can control the position of the button.

To change the image for your button, use the 'User Expanded' and 'User Collapsed' dropdowns in the Expansion Settings.

The 'User Expanded' button is the button a user will see when the widget is expanded, and the 'User Collapsed' button is the button the user will see when the widget is collapsed. Clicking either dropdown will open a list of the image assets you've uploaded to Flexitive. To change the button, select on of the image assets.