📝 Instructions (How to Use) Concept: The "Builder" Pattern
To create a flow, you don't write code manually. You use the included Actions to build a list.

Step-by-Step Implementation:

  - Create a Container: Create a Custom State on your page (e.g., steps_list) set to List of Texts.

  - Add Steps: Create a workflow (e.g., on a button click) that runs a Builder Action (like Builder: Add Delay).

  - Save the Step: In the next workflow step, use:

  - Set State: steps_list -> steps_list: plus item Result of Step 1 (Builder Output).

  - Finalize JSON: When you are ready to run or save the flow, convert the list to a JSON string using this expression:

        [ steps_list: joined with "," ]

  - Execute: Pass this final string into the FlowLogic Pro element's Flow JSON field.

Example: "First Time Visit" Flow
This flow checks if the user is new. If yes, it plays a sound and marks them as visited.

  - Check Storage: Key visited, Operator not_exists. (If they have visited, flow stops here).

  - Play Sound: URL welcome.mp3.

  - Browser Alert: "Welcome to the App!".

  - Set Storage: Key visited, Value yes. (Next time, step 1 will fail and the sound won't play).



🕹️ Actions & Valid Options (Documentation)
Since you are using Text Inputs for flexibility, you must ensure the values match exactly what the Engine expects.

1. Core Actions
Run Flow: Manually starts the execution of the JSON currently in the Flow JSON property.

2. Builder Actions (Generating the JSON)
Use these actions to create the steps. The output is stored in the Builder Output state.

🧱 Builder: Add Condition
Description: Stops the flow if the Context Data does not match the Value.

  - Input Operator (Valid text values):

        equals

        not_equals

        greater

        less

        contains

  - Input Value: The value to compare against.

🧱 Builder: Add Delay
Description: Pauses execution.

  - Input Duration: Number in milliseconds (e.g., 2000 for 2 seconds).

🧱 Builder: Add Redirect
Description: Navigates the user to a new URL.

  - Input URL: Full URL (e.g., /home or https://google.com).

🧱 Builder: Add Webhook
Description: Sends an API request.

  - Input URL: The endpoint URL.

  - Input Method (Valid text values): GET, POST, PUT, DELETE.

  - Input Body JSON: (Optional) JSON string to send. Leave empty for none.

🧱 Builder: Add Scroll
Description: Smooth scrolls to a specific element.

  - Input Element ID: The HTML ID Attribute of the target element.

🧱 Builder: Add Copy
Description: Copies text to the user's clipboard.

  - Input Text: The content to copy.

🧱 Builder: Add Sound
Description: Plays an audio file.

  - Input URL: Link to an MP3/WAV file.

🧱 Builder: Add Trigger
Description: Fires the "Custom Trigger" event in Bubble.

  - Input Trigger Name: A custom name (e.g., open_login). Use this in your workflow conditions: Only when Last Trigger Name is "open_login".

🧱 Builder: Add Set Output
Description: Saves a value to the plugin's state for use in Bubble.

  - Input Value: The text to save.

🧱 Builder: Add Confirm
Description: Shows a native Browser OK/Cancel dialog. Stops flow if Cancel is clicked.

  - Input Message: The question to ask the user.

🧱 Builder: Add Prompt
Description: Shows a native input dialog. Saves result to Prompt Result state.

  - Input Message: The label text.

  - Input Default Value: (Optional) Pre-filled text.

🧱 Builder: Add JS (God Mode)
Description: Executes raw JavaScript.

  - Input Code: The JS code (e.g., alert('Hello');). Use with caution.

3. Storage Actions (Memory) 💾
🧱 Builder: Set Storage
Description: Saves a key/value pair to the Browser's LocalStorage.

  - Input Key: The identifier (e.g., has_seen_intro).

  - Input Value: The value (e.g., yes).

🧱 Builder: Check Storage
Description: Checks a value in LocalStorage. Aborts flow if false.

  - Input Key: The identifier to check.

  - Input Operator (Valid text values):

        equals

        not_equals

        exists (Checks if key is not empty/null)

        not_exists (Checks if key is empty)

  - Input Value: The value to compare (ignored if using exists/not_exists).

🧱 Builder: Get Storage
Description: Reads a value from memory and publishes it to the Output Data state.

  - Input Key: The identifier to read.

4. Visual Actions (CSS) 🎨
🧱 Builder: Add Class
Description: Adds or Removes a CSS Class from an element.

  - Input Element ID: The HTML ID of the element.

  - Input Class Name: The CSS class (e.g., my-animation).

  - Input Action Type (Valid text values):

        Add

        Remove

🧱 Builder: Add Style
Description: Injects inline CSS directly into an element.

  - Input Element ID: The HTML ID.

  - Input Property: The JS style property name (CamelCase recommended).

  - Examples: backgroundColor, display, fontSize, color, opacity.

  - Input Value: The CSS value.

  - Examples: red, none, 20px, #000000, 0.5.