{"schemaVersion":"2.0.0","defaultLanguage":"en","languages":["en"],"launchScreenId":"article_screen_N2PggqL5XbRqV06yduSk","screens":{"article_screen_N2PggqL5XbRqV06yduSk":{"id":"article_screen_N2PggqL5XbRqV06yduSk","name":"V2 canvas: connect screens","tags":["article","support-flow-guide"],"screenType":"FlexibleLayout","position":{"x":0,"y":0},"content":{"canvas":{"background":{"kind":"solid","content":{"color":"#F7F8FA"}},"insets":{"top":0,"end":0,"bottom":0,"start":0},"webViewBackgroundColor":"#F7F8FA"},"animated":false,"offlineFirst":true,"flexibleLayout":{"scrollable":true,"insets":{"top":48,"end":32,"bottom":56,"start":32},"sections":[{"id":"intro","order":0,"kind":"Text","label":"Intro","layout":{"heightKind":"auto"},"textContent":{"title":{"translations":{"en":"V2 canvas: connect screens"},"kind":"static","appearance":{"align":"start","fontSize":30,"fontWeight":800,"lineHeight":36,"color":"#101828"}},"subtitle":{"translations":{"en":"Connect screens so each action leads to the right next screen; verify default and conditional paths."},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":400,"lineHeight":26,"color":"#475467"}}}},{"id":"canvas-connect-screens-connection-handles-text","order":1,"kind":"Text","label":"Find the connection ports","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Find the connection ports"},"kind":"static","appearance":{"align":"start","fontSize":21,"fontWeight":750,"lineHeight":28,"color":"#101828"}},"subtitle":{"translations":{"en":"Each node has handles on its edges: input handles on the left of non-launch screens, and one output handle per action on the right. Hover a handle to see its action label."},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":400,"lineHeight":25,"color":"#344054"}}}},{"id":"canvas-connect-screens-connection-handles-image","order":2,"kind":"Media","label":"Find the connection ports","layout":{"heightKind":"fixed","heightValue":360,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/projects/eEZgfU4hvE9WtLkU30Dg/cli-assets/guide-images/20260601151502_show-connection-overview-connection-overview/origin.png","name":"Find the connection ports"}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"canvas-connect-screens-create-default-edge-text","order":3,"kind":"Text","label":"Draw a default connection","layout":{"heightKind":"auto","margin":{"top":20}},"textContent":{"title":{"translations":{"en":"Draw a default connection"},"kind":"static","appearance":{"align":"start","fontSize":21,"fontWeight":750,"lineHeight":28,"color":"#101828"}},"subtitle":{"translations":{"en":"Drag from an output handle on the source to an input handle on the target to create an edge. This is an unconditional path: every visitor who takes that action goes to the target."},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":400,"lineHeight":25,"color":"#344054"}}}},{"id":"canvas-connect-screens-edit-conditions-text","order":4,"kind":"Text","label":"Add conditions to a connection","layout":{"heightKind":"auto","margin":{"top":20}},"textContent":{"title":{"translations":{"en":"Add conditions to a connection"},"kind":"static","appearance":{"align":"start","fontSize":21,"fontWeight":750,"lineHeight":28,"color":"#101828"}},"subtitle":{"translations":{"en":"Click an edge to open Connection Details, then Edit Conditions to define AND/OR logic on flow variables. Conditional paths activate only when the conditions are true."},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":400,"lineHeight":25,"color":"#344054"}}}},{"id":"canvas-connect-screens-delete-connection-text","order":5,"kind":"Text","label":"Remove a connection","layout":{"heightKind":"auto","margin":{"top":20}},"textContent":{"title":{"translations":{"en":"Remove a connection"},"kind":"static","appearance":{"align":"start","fontSize":21,"fontWeight":750,"lineHeight":28,"color":"#101828"}},"subtitle":{"translations":{"en":"Click an edge, then Delete Connection and confirm. The target becomes unreachable through that action unless another path exists."},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":400,"lineHeight":25,"color":"#344054"}}}},{"id":"canvas-connect-screens-validation-text","order":6,"kind":"Text","label":"Verify the flow is complete","layout":{"heightKind":"auto","margin":{"top":20}},"textContent":{"title":{"translations":{"en":"Verify the flow is complete"},"kind":"static","appearance":{"align":"start","fontSize":21,"fontWeight":750,"lineHeight":28,"color":"#101828"}},"subtitle":{"translations":{"en":"Before publishing, confirm a launch screen is set, every non-final screen has an outgoing connection, paywall screens point to valid products, and each branch ends meaningfully."},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":400,"lineHeight":25,"color":"#344054"}}}},{"id":"canvas-connect-screens-flexible-layout-handles-text","order":7,"kind":"Text","label":"FlexibleLayout sections add their own handles","layout":{"heightKind":"auto","margin":{"top":20}},"textContent":{"title":{"translations":{"en":"FlexibleLayout sections add their own handles"},"kind":"static","appearance":{"align":"start","fontSize":21,"fontWeight":750,"lineHeight":28,"color":"#101828"}},"subtitle":{"translations":{"en":"FlexibleLayout screens hold multiple sections (content, buttons, options, embeds, paywalls), and each can generate its own connection handles. Handles appear automatically based on the sections you add."},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":400,"lineHeight":25,"color":"#344054"}}}},{"id":"canvas-connect-screens-timer-auto-advance-text","order":8,"kind":"Text","label":"Carousel and ProgressSteps auto-advance","layout":{"heightKind":"auto","margin":{"top":20}},"textContent":{"title":{"translations":{"en":"Carousel and ProgressSteps auto-advance"},"kind":"static","appearance":{"align":"start","fontSize":21,"fontWeight":750,"lineHeight":28,"color":"#101828"}},"subtitle":{"translations":{"en":"Carousel and ProgressSteps screens advance on a timer rather than a button, so their timer handle is what you route from. These types have no Action Bar because visitors do not click Continue."},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":400,"lineHeight":25,"color":"#344054"}}}}]}}}},"metadata":{"kind":"article","projectId":"arswew63RwQr6V4Ekb1Z","articleId":"N2PggqL5XbRqV06yduSk","alias":"canvas-connect-screens","source":{"kind":"support-flow-guide-evidence","guideKey":"canvas-connect-screens"},"articlePresentation":{"version":1,"profiles":{"standard":{"containerMaxWidth":1120,"contentInsets":{"top":48,"end":32,"bottom":56,"start":32},"sectionPaddingScale":1,"textScale":1},"laptop":{"containerMaxWidth":960,"contentInsets":{"top":44,"end":40,"bottom":52,"start":40},"sectionPaddingScale":0.96,"textScale":0.96},"tablet":{"containerMaxWidth":760,"contentInsets":{"top":36,"end":28,"bottom":44,"start":28},"sectionPaddingScale":0.9,"textScale":0.92,"titleTextScale":0.9},"phone":{"containerMaxWidth":"100%","contentInsets":{"top":28,"end":16,"bottom":36,"start":16},"sectionPaddingScale":0.82,"textScale":0.88,"titleTextScale":0.82}}}},"webViewDefaultBackgroundColor":"#F7F8FA","projectAnalytics":{"consentManagement":{"enabled":true,"bannerText":"We use cookies to improve your experience and analyze site usage.","privacyPolicyUrl":"","defaultConsent":"denied"},"integrations":[{"platform":"segmently_internal","name":"Segmently Analytics","enabled":true,"config":{"mode":"http"},"createdAt":"2026-05-26T13:53:00.398Z","updatedAt":"2026-05-26T13:53:00.398Z","id":"int_mpmp3jsm_aij2kz"}]}}