## Flow Shortcodes & Widgets

Use these shortcodes outside Gutenberg:

- `[smartcloud-flow-form id="..."]` for reusable blocks / patterns that contain a Flow Form block.
- `[smartcloud-flow-content-root id="..."]` for reusable blocks / patterns that contain a Flow Content Root block.
- `[smartcloud-flow-modal id="..."]` for reusable blocks / patterns that contain a Flow Modal block.

The modal shortcode renders the saved Flow modal structure and accepts the same attribute normalization as the other shortcode routes. Modal overrides such as `modalId`, `showCloseButton`, `closeButtonLabel`, `allowBodyFullscreen`, `size`, `position`, `mobileBehavior`, `backdropStyle`, and the close-behavior flags can all be supplied directly on the shortcode.

Example:

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

All Flow shortcode handlers normalise attribute names across camelCase, kebab-case and snake_case. Form renders can also receive encoded runtime payloads such as `configB64`. Content Root renders also accept extra mini-YAML body config for nested keys such as `colors`, `primaryShade`, or `fieldOverrides`.

Runtime string settings can 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.

Elementor widgets are also available for page-builder users; search for **Flow Form**, **Flow Content Root**, or **Flow Modal** in the Elementor panel. Widget overrides can be left in an inherit state so the saved pattern value remains in effect; the modal widget follows the same rule for options such as close button visibility and body fullscreen support.

Shortcode and Elementor renders use the same runtime as Gutenberg output, so shared Flow rendering keeps the same behavior:

- the same `smartcloud-flow:*` runtime events,
- the same Theme Overrides and `--flow-*` tokens inside the shadow root,
- the same saved Flow block tree as the render source.

For Flow Form renders specifically, this also preserves:

- direct or backend-aware submission,
- custom submit endpoints honoring the configured `endpointMethod` (`GET`, `POST`, `PUT` or `PATCH`),
- wizard and success-state rendering,
- save-draft and AI Suggestions support,

For Modal renders specifically, the shared runtime preserves:

- native `<dialog>` behavior with light-DOM markup,
- delegated open/toggle/close triggers from the host page,
- bubbling `wps-flow-modal:*` lifecycle events,
- the built-in close button and optional body-fullscreen toggle when those options are enabled,
- automatic close-on-submit-success behavior when the modal wraps a Flow form and that option is enabled.