These Nodes connect to native system capabilities and control dynamic UI component states. They enable integration with device-level features and provide programmatic control over interactive components.

Native System Features

These Nodes invoke native operating system capabilities.

• ExternalUrl: Opens an external URL outside the app context (in system browser or new tab).
• Share: Invokes the device's native share sheet for sharing content via messaging apps, email, or social media.

UI Component Control

These Nodes programmatically control the state of UI components.

• Toggle: Programmatically changes a UI element's visibility state or boolean state.
• Toggle Accordion: Programmatically opens or closes an accordion section.

ExternalUrl

This Node opens an external URL outside the current application context. For native apps, this opens the device's system browser. For PWAs, this opens a new browser tab.

To configure ExternalUrl, select the Node on the Canvas and then open the Settings cog in the Right Sidebar.

• URL: The complete URL to open, including the protocol (e.g., https://example.com, mailto:[email protected], tel:+1234567890).

Supported URL Schemes:

• https:// and http://: Opens web pages in the system browser or new tab
• mailto: Opens the default email client with pre-populated recipient
• tel: Opens the phone dialer with pre-populated number
• sms: Opens the messaging app with pre-populated recipient
• Custom schemes: Opens apps registered for custom URL schemes (e.g., twitter://, instagram://)

Common Use Cases:

• Opening external documentation or help articles
• Linking to social media profiles
• Opening email clients for support contact
• Initiating phone calls or SMS messages
• Deep linking into other installed applications
• Opening third-party authentication pages

💡💡💡 Tip 💡💡💡

Use ExternalUrl for links that leave your application context. Use Navigate for internal routing within your application. This distinction is important for maintaining proper navigation flow and user expectations.

📍📍📍 Note 📍📍📍

On iOS, opening external URLs may require explicit user consent for security reasons. The system may display a confirmation dialog before opening the URL in certain cases.

💡💡💡 Tip 💡💡💡

For mailto: URLs, you can include pre-populated subject and body using query parameters: mailto:[email protected]?subject=Help Request&body=I need assistance with...

Share

This Node invokes the device's native share sheet, allowing users to share content through installed apps, services, and system features. The share sheet includes options like messaging apps, email, social media, AirDrop (iOS), and Nearby Share (Android).

To configure Share, select the Node on the Canvas and then open the Settings cog in the Right Sidebar.

• Title: The title or headline of the content being shared. This appears in the share sheet and may be used as the subject line in some share targets.
• Text: The main content to share. This is the body of the shared message and will be included in most share targets.
• URL: Optional URL to share alongside the text. Many share targets will display this as a link preview with metadata (title, image, description).

Common Use Cases:

• Sharing product pages with friends
• Sharing articles or blog posts via social media
• Sending content via messaging apps
• Copying links to clipboard
• Sharing via email with pre-populated content
• AirDrop sharing on iOS devices

💡💡💡 Tip 💡💡💡

The native share sheet automatically adapts to the user's device and installed apps. You don't need to implement separate sharing mechanisms for different platforms or services—the OS handles this natively.

📍📍📍 Note 📍📍📍

The Share Node uses the Web Share API for PWAs and native share functionality for mobile apps. Not all browsers support the Web Share API—on unsupported browsers, consider providing fallback sharing options like copy-to-clipboard or direct links to social platforms.

💡💡💡 Tip 💡💡💡

When sharing URLs, ensure they include proper Open Graph or Twitter Card metadata for rich link previews. This makes shared content more engaging and increases click-through rates.

💡💡💡 Tip 💡💡💡

Use Try Node to wrap Share invocations to handle cases where sharing is cancelled or fails. The error path can be used to show alternative sharing options or simply dismiss the action gracefully.

Toggle

This Node programmatically changes a UI element's visibility state or boolean state. This enables dynamic UI control based on Flow logic, user actions, or application state.

To configure Toggle, select the Node on the Canvas and then open the Settings cog in the Right Sidebar.

• Target Component ID: The identifier of the component to toggle. Right-click on the desired Component in the Structure Panel and select "Copy ID" to obtain this value.
• Toggle Action:
• • Show: Makes the component visible
  • Hide: Makes the component invisible
  • Toggle: Switches between visible and invisible states
  • Enable: Makes the component interactive (if it supports enabled/disabled states)
  • Disable: Makes the component non-interactive

Common Use Cases:

• Showing/hiding form sections based on previous selections
• Displaying loading indicators during API requests
• Revealing content after user authentication
• Toggling visibility of error messages
• Enabling/disabling submit buttons based on form validation
• Creating expandable content sections

💡💡💡 Tip 💡💡💡

Use Toggle with "Toggle" action when you want to flip the current state without knowing what it is. Use "Show" or "Hide" when you need to enforce a specific state regardless of the current state.

📍📍📍 Note 📍📍📍

Toggle changes visibility or enabled state, but does not remove components from the DOM or layout. Hidden components still occupy space in the layout unless CSS display properties are configured to remove them from flow.

💡💡💡 Tip 💡💡💡

For conditional rendering based on data, consider using FQL conditional expressions in the component's visibility settings instead of Toggle. This creates a more declarative, data-driven UI that automatically updates when data changes.

Toggle Accordion

This Node programmatically opens or closes an Accordion Component section. This enables controlled accordion behavior based on Flow logic, allowing you to create custom interaction patterns beyond simple click-to-expand.

To configure Toggle Accordion, select the Node on the Canvas and then open the Settings cog in the Right Sidebar.

• Accordion Component ID: The identifier of the Accordion Component to control. Right-click on the desired Accordion in the Structure Panel and select "Copy ID" to obtain this value.
• Toggle Action:
• • Open: Expands the accordion section to show content
  • Close: Collapses the accordion section to hide content
  • Toggle: Switches between open and closed states

Common Use Cases:

• Opening specific accordion sections based on URL parameters or deep links
• Expanding accordions after successful form submission
• Closing accordions after user completes an action
• Creating "Expand All" / "Collapse All" buttons for multiple accordions
• Opening relevant sections based on search results or filters
• Implementing programmatic accordion navigation

💡💡💡 Tip 💡💡💡

To create "Expand All" functionality, use multiple Toggle Accordion Nodes in sequence (or within a Split Node for parallel execution) to control all accordion components on the page.

📍📍📍 Note 📍📍📍

This Node only controls Accordion Components created in Shipcode. It does not control custom accordion implementations or accordions from external libraries.

💡💡💡 Tip 💡💡💡

Combine Toggle Accordion with Navigate to Tab or Scroll To Element to create seamless navigation experiences that guide users to specific content sections and automatically expand them.

💡💡💡 Tip 💡💡💡

Use Update Query to store accordion state in the URL, then use Toggle Accordion based on query parameters on page load. This makes accordion states bookmarkable and shareable.