Hosted Pages
As of September 26, 2023, Hosted Pages are deprecated and are unavailable in new projects. Flowize has announced that support for this functionality will cease. Hosted Pages in existing projects may continue to operate, but Flowize recommends moving to an alternative solution. Contact the support team for guidance.
This article describes the legacy Hosted Pages editor and flow tools. It applies to existing projects that still use Hosted Pages. You can create pages from HTML source or build them with the visual editor, then connect page elements and forms to flows.
Overview
The Hosted Pages overview lists the pages in your project. Each page has an Actions menu.
Create a page
- In Hosted Pages, select New Content.
- Select Start from scratch.
- Enter a name and description, then select Save. The Hosted Pages editor opens.
- Choose how to build the page:
- To import existing HTML, select Import Source Code in the top toolbar. Paste the HTML and select Import.
- To build the page in the editor, use HTML Blocks to add and arrange elements. You can also start from a template, if one is available in your project.
Editor toolbar
The toolbar below the main navigation contains controls for viewing, editing, and configuring the page.
| Control | What it does |
|---|---|
| Back | Returns to the Hosted Pages overview. |
| Device Type | Previews the page at different device sizes. |
| Undo / Redo | Moves backward or forward through recent edits. |
| Hidden Items | Shows or hides items marked as hidden. |
| Grid | Shows or hides the editor grid. |
| Fullscreen | Expands the editor to fullscreen. |
| Preview | Opens a preview of the page in a new tab. |
| Import Source Code | Opens the source editor to import HTML. |
| Publish | Publishes content that has already been published. |
| Help | Explains the toolbar controls. |
| Content Configuration | Edits page details such as its name and description. |
| HTML Blocks | Opens the library of elements you can add to the page. |
| Block Configuration | Configures how a selected block interacts with flows. |
| Styles | Changes styles for page elements. |
| Layers | Shows the page structure and its elements. |
Edit the page
Open a page from the overview, then select an element on the canvas to show its element toolbar and settings.
| Element control | What it does |
|---|---|
| Select Parent | Selects the selected element's parent. |
| Content Settings | Configures properties for the selected element. |
| Move Tool | Moves the element within the page. |
| Clone Tool | Creates a copy of the element. |
| Language Tool | Edits the element's text. |
| Edit | Opens the element for editing. |
| Delete | Removes the element. |
| Blocks | Saves an element or container as a reusable block. |
Add elements with HTML Blocks
Open HTML Blocks to add sections and elements to the page. Drag a block from the library onto the canvas, then customize it.
The library groups blocks into these categories:
- Layout: Sections, columns, headers, and footers. Add a layout before filling it with content to keep the page organized.
- Typography: Links, text, and headings.
- Basic: Link buttons, link blocks, grid items, style buttons, and dividers.
- Forms: Ready-made forms that you can add to the page.
- Tables: Tables. When you add one, choose the number of rows and columns, then select Create Table.
- Media: Images, video, and social sharing icons.
- Extra: Maps, iframes, progress bars, tabs, navigation bars, accordions, language dropdowns, and feedback controls.
Configure a block
Use Block Configuration with a form block to configure what happens when a user submits the form. Select the form's submit button, open Block Configuration, and choose Send status to the flow. Then provide the Webhook URL and Webhook ID.
To redirect the user after submission, set Redirect to URL after submit? to Yes and enter the destination URL. Enable the Keystore data option if the form needs to update Keystore data.
Change styles
Select an element, then open Styles to configure its appearance. The available groups include:
- Classes: Adds classes to an element, including classes from external libraries such as Bootstrap.
- Layout: Sets display and position properties.
- Dimension: Sets the element's height and width.
- Typography: Sets the font, size, color, alignment, and decoration.
- Indent: Sets margins and padding.
- Background: Sets the background color and opacity.
- Border: Changes the element's border.
- Effects: Sets transitions and transforms.
View and organize layers
Layers shows the containers and elements that make up the page. Drag a layer to move it up or down. Use its eye control to show or hide the element.
Use Hosted Pages tools in a flow
In the flow editor, open Website in the tools panel, then open Hosted Page. Drag one of its tools onto the flow:
- Hosted Page Generator creates a unique URL for a Hosted Page.
- Feedback sends the user to the next page.
- Feedback To A Direct URL redirects the user to a selected Direct URL.
Hosted Page Generator
Configure the generator with an object name and the Hosted Page content to use. You can select content from the list or enter its name. The generator also lets you configure an expiration date and date format, a redirect URL for when the page expires, and a domain URL.
The generator's response includes the Hosted Page ID and URL. Use the Hosted Page ID when configuring a Feedback tool.
Feedback
Use Feedback to continue to the next Hosted Page. Set Hosted Page ID to the value returned by the Hosted Page Generator.
Feedback To A Direct URL
Use this tool to redirect the user to a Direct URL. Select the Direct URL to use. For Feedback redirect URL, enter a destination URL or use the URL returned by a Hosted Page Generator earlier in the flow.
For more information about Direct URLs, see Direct URLs.
Was this article helpful?