Flexitive's ISI Widget allows users to add an interactive component holding legal information about an advertised product in their designs. The component can be set to expand and collapse on user interaction.
In the design below, you can click the expandbutton to expand and collapse the widget.
Building an ISI Widget
To add an ISI Widget to your canvas, open the Widgets panel on the left-hand side of the editor, then click ISI.
After you've added the ISI Widget to your canvas, you can re-position and re-size the widget on the canvas. The position and size you set for the ISI 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 an ISI Widget
When you add an ISI widget to a design, the widget will include 3 embedded pages; the Header, the Body and the Footer of the Widget. In the context of a Flexitive widget, we call these embedded pages Child Pages. To edit the contents of an ISI Widget, you'll need to edit the Child Pages for the design.
By default, the Header and Footer of an ISI Widget will have a green background and contain placeholder text. The Body of an ISI Widget will have a white background and contain placeholder text. To edit the content of any of the Child Pages, save your design and click the Design-ID for the page you'd like to edit in the ISI Settings Panel.
Clicking the Design-ID will open the editor for the selected child page. Once you're in the editor, 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.
Expanded and Collapsed States of the ISI Widget
In the ISI Widget, 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 ISI Settings panel.
In an ISI Widget, the Toggle Resize option will be set to ON by default, while the Delay Resize option will be set to OFF.
When Toggle Resize is ON, you will see options for the position of both the Expanded and Collapsed states of the ISI 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.
Turning on Delay Resize will cause the widget to 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 ISI 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 one of the image assets.