Skip to main content

Shortcodes & Widgets​

Flow can be reused outside Gutenberg via shortcode and Elementor integrations.

Shortcodes​

[smartcloud-flow-form id="..."]​

Use this shortcode when the referenced reusable block / pattern contains a Flow Form block.

The shortcode renders a Flow form from a referenced block / pattern source. Attribute names are normalized across camelCase, kebab-case and snake_case.

In deployments that use runtime config overrides, you can also pass encoded configuration payloads such as configB64 from the host page.

Runtime string settings can also use the same interpolation tokens described in the JavaScript API page. For example, endpointPath can be set to values such as {{location.origin}}/contact, {{wpsuite.apiBaseUrl}}/contact or {{global.MyApp.forms.submitUrl}} when those globals are available on the host page.

When a form uses a custom submit endpoint, you can also set endpointMethod to GET, POST, PUT or PATCH. If it is omitted, Flow keeps using POST. With GET, Flow sends the serialized field values as URL query parameters. Additional browser-side request headers can be supplied through endpointHeaders as a JSON object string, for example {"X-Request-Source":"wpsuite"}. Header values support the same runtime interpolation tokens as endpointPath, so values such as {"X-Post-Id":"{{wp.postId}}","X-Email":"{{email}}"} are resolved at submit time.

[smartcloud-flow-form id="123"]

[smartcloud-flow-content-root id="..."]​

Use this shortcode when the referenced reusable block / pattern contains a Flow Content Root block.

This is useful when you want to render a saved Flow content container and its child display/layout blocks outside Gutenberg without embedding a form instance. The shortcode uses the same attribute-name normalization as the form shortcode.

Common overrides include language, direction, colorMode, primaryColor, and themeOverrides. Extra nested config can also be supplied in the shortcode body as mini-YAML, for example for colors, primaryShade, or fieldOverrides.

[smartcloud-flow-content-root id="456" colormode="dark"]
primaryShade:
  light: 5
  dark: 8
[/smartcloud-flow-content-root]

[smartcloud-flow-modal id="..."]​

Use this shortcode when the referenced reusable block / pattern contains a Flow Modal block.

The shortcode renders the saved Flow modal structure and accepts the same camelCase, kebab-case and snake_case attribute normalization as the existing Flow shortcodes. Modal behaviour overrides such as modalId, showCloseButton, closeButtonLabel, allowBodyFullscreen, size, position, mobileBehavior, backdropStyle and the close behaviour flags can all be supplied directly on the shortcode.

[smartcloud-flow-modal id="789" modalid="product-gallery" allowbodyfullscreen="true"]

Elementor​

Flow also includes Elementor integration so Flow blocks can be embedded into Elementor-powered layouts.

Available widgets:

  • Flow Form
  • Flow Content Root
  • Flow Modal

Widget override controls can be left in an inherit state. In that case the widget does not emit the corresponding shortcode attribute, so the original value stored in the referenced Flow pattern remains effective. The modal widget follows the same rule for options such as close button visibility and body fullscreen support.

Runtime behaviour​

Both shortcode and Elementor paths keep the same runtime surface as Gutenberg output for shared Flow rendering concerns:

  • the same smartcloud-flow:* runtime events still bubble to the host page,
  • the same Theme Overrides and --flow-* tokens still apply inside the shadow root,
  • the same saved Flow block structure is used as the render source.

For Flow Form renders specifically, the existing submission behavior also stays the same:

  • the form can still submit directly from the browser to the configured per-form endpoint URL,
  • custom submit endpoints now honor the configured endpointMethod (GET, POST, PUT or PATCH),
  • backend-aware forms still use the configured Flow backend transport,
  • wizard, success-state, draft and AI suggestions behavior still works,