Create and manage a website

Use Websites in Flowize to import HTML files and assets, choose a template, and customize its content in the website editor. The editor works with the content you provide in the ZIP file.

note

New websites are published automatically. Finish the first page before sharing its public URL. Saving edits to a published website immediately updates the published website.

Import a website

Prepare a .zip file containing your website's HTML files and supporting CSS, JavaScript, and images.

HTML compatibility

The website builder cannot load page content dynamically from a backend or external request. Include the complete page HTML in the ZIP file.

1. Open Websites under Contents in your project.
2. Select New Website.
3. In Configuration, enter a Name under Website Details.
4. Select Choose File and choose your ZIP file.
5. Select UPLOAD.
6. Under Select the Template file, select the HTML file to use as your template.
7. Select Save to open the website editor.
8. In the template, select a page container and save the template. This creates the Index content page.
9. Open Index from Website Menu, add the content you want visitors to see, and save the page.
10. In Index's Content Configuration, open the Public URL to check the page and its links.

If the public URL returns a 404 after import, check that you have selected a page container and saved the Index page. The Published status alone does not confirm that a page is ready to view.

warning

Uploading a new ZIP file for an existing website deletes the current website and all its pages.

Open and navigate the editor

For an existing website, open its Actions menu in the Websites overview and select Open Editor. You can also select Open Editor from the website's configuration page.

The Website Menu shows the website and its template. The Template Manager lists the template files, and Template Configuration contains the template's Name and Description.

Select an element on the canvas to display its toolbar and settings. The breadcrumbs below the canvas show the selected element's containing structure.

Editor tools

Use the toolbar controls to manage pages, edit content, and preview the website.

Control	Icons	Use
Website Menu		Add and delete website pages.
Device Type		Preview the website at different device sizes.
Hidden Items		Show or hide hidden elements in the editor.
Grid		Show or hide grid guides.
Fullscreen		Expand the editor to fullscreen.
Preview		Open a preview in a new tab.
Undo and Redo		Step backward or forward through edits.
Manage Assets		Add, delete, or open website assets.
Header		Change the page title.
Content Configuration		Edit content settings, such as names and descriptions.
Website Blocks		Add layouts and elements, such as tables, links, and buttons.
Block Configuration		Connect forms and links to flows.
Styles		Change the styles of HTML elements.
Layers		View and arrange the website's element tree.

Edit template content

Select a page container

The page container is the part of the template where Flowize displays a content page. To set it up:

1. In the template editor, select the container that should hold the page content, such as <main>.
2. Select Container Manager and choose the page container option.
3. Confirm the change, then select Save in the template editor.

Flowize creates an Index content page when you save the page container. Open Index from Website Menu and add content inside the selected container. Content shown in the imported template is not automatically added to Index. You can use Website Blocks to build the page or edit a block's HTML to reuse markup from your ZIP file. Save Index to update the public page.

Changing the page container affects the public website's output.

note

The body element cannot be selected as a page container.

Before sharing the public URL, test links from the imported HTML. A link to a file such as index.html can lead to a 404 because Flowize serves the content page at its public URL. In Block Configuration, point the link to the appropriate Flowize page URL. For a link to the site's home page, ./ works from the site root.

Create a block container

A block container lets you display different content on the current page without redirecting the visitor to another page.

1. Open a page and select a container.
2. Select Container Manager.
3. When prompted to set it as a page container, select No, set as Block container.
4. Enter a unique name and save the change.

Add a block to a block container

1. Open Website Menu and expand the page containing your block container.
2. Expand the block container and select Add a new Block.
3. Customize the block and save the page.

Use the Load block tool in your flow to display the block when needed.

Create reusable blocks

Reusable blocks let you use the same content on multiple pages.

1. Open Website Menu and select BLOCK ASSETS MANAGER.
2. Choose the HTML file containing the content you want to reuse.
3. Select the element you want to save as a block, then select its save-as-block option.
4. Enter a unique name and select Save.

Your reusable blocks are available in the Website Blocks tool.

Add pages to your website

1. Open Website Menu, right-click Index, and select Add Page.
2. Open Content Configuration and edit the Name and Friendly URL as needed.
3. Save the page.

To visit the page, open its Public URL in Content Configuration.

Add content with Website Blocks

Open Website Blocks and drag elements onto the canvas.

Group	Use
Layout	Add sections, columns, headers, and footers. Start here to organize the page structure.
Typography	Add links, text, and headings.
Basic	Add link buttons, link blocks, grid items, style buttons, and dividers.
Forms	Add a ready-made form.
Tables	Add a table. Choose the number of rows and columns, then select Create Table.
Website Blocks	Add reusable blocks you have already created.
Media	Add images and videos.

Connect forms and links to flows

Use Block Configuration to assign variables to form inputs, start a flow, or send a status to a flow from a form or link.

To configure an input variable:

1. Select an input element in a form.
2. Open Block Configuration.
3. Enter a name and save it.

Flowize creates a variable in the format @site...@ that you can use in a data schema, table, or flow.

To start a flow or send a status when a visitor submits a form, first create the flow, then:

1. Select the submit button in the form.
2. Open Block Configuration.
3. Select Start a Flow or Send status to the flow.
4. Choose the flow from the list.
5. Choose whether to disable the button after it is clicked and whether to show a loading page.

Style an element

Select an element on the canvas, then open Styles to adjust its appearance.

Setting	Use
Classes	Add CSS classes, including classes from libraries such as Bootstrap.
Layout	Set position and display properties.
Dimension	Adjust height and width.
Typography	Set the font, size, color, alignment, and text decoration.
Indent	Adjust margins and padding.
Background	Set the background color and opacity.
Border	Change borders.
Effects	Set transition and transform properties.

Arrange layers

Open Layers using the stacked-layers icon in the top toolbar. Expand branches to find nested elements, then select an item to locate it on the canvas.

Drag an item's move handle up or down to reorder it. Use its eye icon to show or hide the element.

Use website tools in a Flow

Open your flow and add Websites object and configure the function you need.

Tool	Use
Close session	End the data record session used to render the website page.
Get page URL	Retrieve a page URL for use in another application, such as an email.
Load Block	Load a block into a block container without reloading the entire page.
Load Page	Redirect the browser to a page or load the page inside a container.
Load Page by URL	Redirect the browser to a URL.
Privacy level	Set the active security tags used to control access to private pages. Visitors without matching tags are redirected to the configured page.

Close session

Use Close session to end the website's data record session and redirect the visitor.

1. Add Close session to the flow and open its configuration.
2. Enter a name and choose the website.
3. Choose the page to display after the session closes.
4. Select Save.

Get page URL

Use Get page URL to retrieve the URL of a website page.

1. Add Get page URL to the flow and open its configuration.
2. Enter a name, then choose the website and page.

note

Use the tool's response variable to pass the URL to the next application in your flow.

Load block

Use Load block to display a block without reloading the entire page.

1. Add Load block to the flow and open its configuration.
2. Enter a name and choose the website containing the block.
3. Under Choose a Block container, select the target container.
4. Under Choose a Block, select the block to load.

Load page

Use Load page to display another website page.

1. Add Load page to the flow and open its configuration.
2. Enter a name, then choose the website and page.
3. Under How to load the page?, choose a loading method:
   • Redirect the user to the new page: Navigate to the selected page.
   • Inside a container in the current page: Load the page into the selected container on the current page.
4. If loading inside the current page, choose the target container.
5. Select Save.

See Select a page container to configure a container.

If you use your own domain and have uploaded an SSL certificate for it, enter the domain in Custom domain so the tool uses it in the generated URLs.

Privacy level

Use Privacy level to set the active security tags for access to private website pages.

First, configure page security in the website editor:

1. Open the website under Contents > Websites.
2. Select a link or a button inside a form, then open Content Configuration.
3. Set Page security to Yes.
4. Add Security Level Tags, such as admin.
5. Choose the page to display to visitors who do not have the required tags.

Then configure the flow tool:

1. Add Privacy level to the flow and open its configuration.
2. Add the security tags you created in the website editor to make them active.
3. Choose the website.

Visitors with matching tags can access the private page. Other visitors are redirected to the page you configured.

Website status

Use Website status to listen for a status sent when a visitor interacts with a website link or form button.

1. In the website editor, select the link or form button.

2. Open Block Configuration and select Send status to the flow.

   

3. Configure the status to send.

4. Add Website status to your flow and configure it to listen for that status.

Enter the status name exactly as it appears in the website configuration.

Website events

note

This section is for developers adding custom JavaScript behavior to websites used in Flowize. These events are configured in your website's source code.

Use the following events to respond to page loads, form submissions, and visitor interactions.

Event	Trigger
fw:page:loaded	A page loads into a container through AJAX.
fw:page:redirect	A page is about to redirect.
fw:block:loaded	A block loads into a container through AJAX.
fw:form:submitted	Before a form is submitted or its submit button is clicked.
fw:form:success	A form submission succeeds.
fw:form:error	A form submission fails.
fw:form:complete	A form submission finishes, whether it succeeds or fails.
fw:button:disabled	A button is disabled.
fw:link:clicked	A link is clicked.
fw:link:disabled	A link is disabled.

Page events

Use page events to run code when a page loads or before it redirects.

Page loaded

The fw:page:loaded event fires when a page loads into a container through AJAX.

$(document).on('fw:page:loaded', function() {
    // Your code goes here.
});

Use the event data to access the page ID and name:

$(document).on('fw:page:loaded', function(ev) {
    // ev.detail.id: page ID
    // ev.detail.name: page name
});

Page redirected

The fw:page:redirect event fires just before the page redirects.

$(document).on('fw:page:redirect', function() {
    // Your code goes here.
});

Block loaded

The fw:block:loaded event fires when a block loads into a container through AJAX. Use its data to identify the block and target container.

$(document).on('fw:block:loaded', function(ev) {
    // ev.detail.id: block ID
    // ev.detail.name: block name
    // ev.detail.container_name: container where the block loaded
});

Form events

Use form events to respond to submission, success, failure, or completion.

Form submitted

The fw:form:submitted event fires before the form is submitted or its submit button is clicked.

$('form').on('fw:form:submitted', function() {
    // Your code goes here.
});

Form submission success

The fw:form:success event fires when a form submission succeeds.

$('form').on('fw:form:success', function() {
    // Your code goes here.
});

Form submission error

The fw:form:error event fires when a form submission fails.

$('form').on('fw:form:error', function() {
    // Your code goes here.
});

Form submission completed

The fw:form:complete event fires when a form submission finishes, whether it succeeds or fails.

$('form').on('fw:form:complete', function() {
    // Your code goes here.
});

Button event

The fw:button:disabled event fires when a button is disabled.

$('button').on('fw:button:disabled', function() {
    // Your code goes here.
});

Link events

Use link events to respond when a link is clicked or disabled.

Link clicked

The fw:link:clicked event fires when a link is clicked.

$('a').on('fw:link:clicked', function() {
    // Your code goes here.
});

Link disabled

The fw:link:disabled event fires when a link is disabled.

$('a').on('fw:link:disabled', function() {
    // Your code goes here.
});

Manage website availability

Unpublish a website

1. Open the published website's Actions menu and select Unpublish.
2. In Unpublish this site?, select Unpublish to confirm.

The website changes to Draft. Users lose access until it is republished. To republish a draft website, use Publish in its Actions menu.

Delete a website

If the website is published, unpublish it first. Delete is available when the website is in Draft status.

1. Open the website's Actions menu and select Delete.
2. In Delete Site?, type DELETE in the confirmation field.
3. Select Delete.

warning

Deleting a website is permanent and cannot be undone.