{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["cards","card"]},"redocly_category":"Products","product_name":"Engage Studio","type":"markdown"},"seo":{"title":"In-Browser Messaging — Setup & Prerequisites","description":"Checklist of RT Personalization 2.0 and TD Web SDK requirements before creating In-Browser Message campaigns in Engage Studio.","siteUrl":"https://docs.treasure.ai","lang":"en-US","jsonLd":{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.treasure.ai/","name":"Treasure AI","url":"https://www.treasure.ai/","logo":"https://www.treasure.ai/hubfs/assets/images/logos/primary-logo.svg"},{"@type":"WebSite","@id":"https://docs.treasure.ai/#website","name":"Treasure AI Documentation","url":"https://docs.treasure.ai/","inLanguage":["en","ja"],"publisher":{"@id":"https://www.treasure.ai/"}}]},"llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"setup--prerequisites","__idx":0},"children":["Setup & Prerequisites"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Before creating In-Browser Message campaigns, confirm the following are in place. These are one-time configuration tasks shared across the Treasure AI platform team."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"checklist","__idx":1},"children":["Checklist"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"treasure-ai-platform-it--data-engineer","__idx":2},"children":["Treasure AI platform (IT / Data Engineer)"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["RT Personalization 2.0 is enabled"]}," for your account. Contact your Customer Success Manager if unsure."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["HTTPS is required"]}," — the target website must be served over HTTPS. RT Personalization 2.0 does not operate over HTTP."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["ID stitching"]}," is configured so user identities are resolved across events (for example, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_client_id"]}," linked to your internal user ID)."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"audience-studio-data-engineer--marketer","__idx":3},"children":["Audience Studio (Data Engineer / Marketer)"]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":4},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["A Parent Segment"]}," exists with the relevant customer data and RT attributes."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["A Real-Time Personalization"]}," and at least one ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["section"]}," are created in Audience Studio using the relevant parent segment."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"website-developer","__idx":4},"children":["Website (Developer)"]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":6},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["The TD Web SDK is installed and initialized"]}," on the target website. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/marketing-cloud/engage-studio/experiences/sdk-integration"},"children":["SDK Integration"]}," for the full implementation guide."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Business events are flowing"]}," into Treasure AI (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["view_item"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["add_to_cart"]},", etc.). See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/marketing-cloud/engage-studio/experiences/event-tracking"},"children":["Event Tracking"]}," for event definitions and naming conventions."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["(Recommended) Server-Side Cookie (SSC) infrastructure is deployed"]}," on your domain. SSC issues ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_ssc_id"]}," from your own server, avoiding browser ITP restrictions that cap JavaScript-set cookies to 7 days on Safari/iOS. Requires a small server endpoint on your domain (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ssc.yourdomain.com"]},"). Contact your Customer Success Manager for the SSC setup guide."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"how-the-sdk-renders-messages","__idx":5},"children":["How the SDK Renders Messages"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When the RT Personalization API returns a campaign payload, the SDK renders the message automatically:"]},{"$$mdtype":"Tag","name":"Diagram","attributes":{"data-language":"mermaid","diagramType":"mermaid","diagramSource":"flowchart TD\n    A[Personalization API returns payload] --> B{Message Type?}\n    B -->|Popup| C[Inject popup container overlay\\non top of page]\n    B -->|Inline| D[Replace innerHTML of\\nCSS selector–matched Zone]\n    C --> E[Position per placement setting\\nShow only latest created_at popup]\n    D --> F[Render all returned\\ninline messages]\n","diagramHtml":"<svg id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d\" width=\"100%\" xmlns=\"http://www.w3.org/2000/svg\" class=\"flowchart\" style=\"max-width: 586px;\" viewBox=\"0 0 586 661.734375\" role=\"graphics-document document\" aria-roledescription=\"flowchart-v2\"><style>#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d{font-family:\"Redocly Mermaid Sans\",sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .error-icon{fill:#552222;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .error-text{fill:#552222;stroke:#552222;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .edge-thickness-normal{stroke-width:1px;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .edge-thickness-thick{stroke-width:3.5px;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .edge-pattern-solid{stroke-dasharray:0;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .edge-thickness-invisible{stroke-width:0;fill:none;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .edge-pattern-dashed{stroke-dasharray:3;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .edge-pattern-dotted{stroke-dasharray:2;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .marker{fill:#333333;stroke:#333333;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .marker.cross{stroke:#333333;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d svg{font-family:\"Redocly Mermaid Sans\",sans-serif;font-size:16px;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d p{margin:0;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .label{font-family:\"Redocly Mermaid Sans\",sans-serif;color:#333;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .cluster-label text{fill:#333;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .cluster-label span{color:#333;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .cluster-label span p{background-color:transparent;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .label text,#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d span{fill:#333;color:#333;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .node rect,#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .node circle,#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .node ellipse,#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .node polygon,#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .rough-node .label text,#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .node .label text,#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .image-shape .label,#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .icon-shape .label{text-anchor:middle;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .rough-node .label,#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .node .label,#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .image-shape .label,#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .icon-shape .label{text-align:center;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .node.clickable{cursor:pointer;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .arrowheadPath{fill:#333333;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .edgePath .path{stroke:#333333;stroke-width:1px;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .flowchart-link{stroke:#333333;fill:none;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .cluster text{fill:#333;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .cluster span{color:#333;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\"Redocly Mermaid Sans\",sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d rect.text{fill:none;stroke-width:0;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .icon-shape,#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .icon-shape p,#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .icon-shape .label rect,#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d .node .neo-node{stroke:#9370DB;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d [data-look=\"neo\"].node rect,#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d [data-look=\"neo\"].cluster rect,#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d [data-look=\"neo\"].node polygon{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d [data-look=\"neo\"].node path{stroke:#9370DB;stroke-width:1px;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d [data-look=\"neo\"].node .outer-path{filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d [data-look=\"neo\"].node .neo-line path{stroke:#9370DB;filter:none;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d [data-look=\"neo\"].node circle{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d [data-look=\"neo\"].node circle .state-start{fill:#000000;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d [data-look=\"neo\"].icon-shape .icon{fill:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d [data-look=\"neo\"].icon-shape .icon-neo path{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d :root{--mermaid-font-family:\"Redocly Mermaid Sans\",sans-serif;}#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d :root{--mermaid-font-family:\"Redocly Mermaid Sans\",sans-serif;}</style><g><marker id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d_flowchart-v2-pointEnd\" class=\"marker flowchart-v2\" viewBox=\"0 0 10 10\" refX=\"5\" refY=\"5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" class=\"arrowMarkerPath\" style=\"stroke-width: 1; stroke-dasharray: 1, 0;\"></path></marker><marker id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d_flowchart-v2-pointStart\" class=\"marker flowchart-v2\" viewBox=\"0 0 10 10\" refX=\"4.5\" refY=\"5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\"><path d=\"M 0 5 L 10 10 L 10 0 z\" class=\"arrowMarkerPath\" style=\"stroke-width: 1; stroke-dasharray: 1, 0;\"></path></marker><marker id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d_flowchart-v2-pointEnd-margin\" class=\"marker flowchart-v2\" viewBox=\"0 0 11.5 14\" refX=\"11.5\" refY=\"7\" markerUnits=\"userSpaceOnUse\" markerWidth=\"10.5\" markerHeight=\"14\" orient=\"auto\"><path d=\"M 0 0 L 11.5 7 L 0 14 z\" class=\"arrowMarkerPath\" style=\"stroke-width: 0; stroke-dasharray: 1, 0;\"></path></marker><marker id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d_flowchart-v2-pointStart-margin\" class=\"marker flowchart-v2\" viewBox=\"0 0 11.5 14\" refX=\"1\" refY=\"7\" markerUnits=\"userSpaceOnUse\" markerWidth=\"11.5\" markerHeight=\"14\" orient=\"auto\"><polygon points=\"0,7 11.5,14 11.5,0\" class=\"arrowMarkerPath\" style=\"stroke-width: 0; stroke-dasharray: 1, 0;\"></polygon></marker><marker id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d_flowchart-v2-circleEnd\" class=\"marker flowchart-v2\" viewBox=\"0 0 10 10\" refX=\"11\" refY=\"5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"11\" markerHeight=\"11\" orient=\"auto\"><circle cx=\"5\" cy=\"5\" r=\"5\" class=\"arrowMarkerPath\" style=\"stroke-width: 1; stroke-dasharray: 1, 0;\"></circle></marker><marker id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d_flowchart-v2-circleStart\" class=\"marker flowchart-v2\" viewBox=\"0 0 10 10\" refX=\"-1\" refY=\"5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"11\" markerHeight=\"11\" orient=\"auto\"><circle cx=\"5\" cy=\"5\" r=\"5\" class=\"arrowMarkerPath\" style=\"stroke-width: 1; stroke-dasharray: 1, 0;\"></circle></marker><marker id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d_flowchart-v2-circleEnd-margin\" class=\"marker flowchart-v2\" viewBox=\"0 0 10 10\" refY=\"5\" refX=\"12.25\" markerUnits=\"userSpaceOnUse\" markerWidth=\"14\" markerHeight=\"14\" orient=\"auto\"><circle cx=\"5\" cy=\"5\" r=\"5\" class=\"arrowMarkerPath\" style=\"stroke-width: 0; stroke-dasharray: 1, 0;\"></circle></marker><marker id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d_flowchart-v2-circleStart-margin\" class=\"marker flowchart-v2\" viewBox=\"0 0 10 10\" refX=\"-2\" refY=\"5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"14\" markerHeight=\"14\" orient=\"auto\"><circle cx=\"5\" cy=\"5\" r=\"5\" class=\"arrowMarkerPath\" style=\"stroke-width: 0; stroke-dasharray: 1, 0;\"></circle></marker><marker id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d_flowchart-v2-crossEnd\" class=\"marker cross flowchart-v2\" viewBox=\"0 0 11 11\" refX=\"12\" refY=\"5.2\" markerUnits=\"userSpaceOnUse\" markerWidth=\"11\" markerHeight=\"11\" orient=\"auto\"><path d=\"M 1,1 l 9,9 M 10,1 l -9,9\" class=\"arrowMarkerPath\" style=\"stroke-width: 2; stroke-dasharray: 1, 0;\"></path></marker><marker id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d_flowchart-v2-crossStart\" class=\"marker cross flowchart-v2\" viewBox=\"0 0 11 11\" refX=\"-1\" refY=\"5.2\" markerUnits=\"userSpaceOnUse\" markerWidth=\"11\" markerHeight=\"11\" orient=\"auto\"><path d=\"M 1,1 l 9,9 M 10,1 l -9,9\" class=\"arrowMarkerPath\" style=\"stroke-width: 2; stroke-dasharray: 1, 0;\"></path></marker><marker id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d_flowchart-v2-crossEnd-margin\" class=\"marker cross flowchart-v2\" viewBox=\"0 0 15 15\" refX=\"17.7\" refY=\"7.5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"12\" markerHeight=\"12\" orient=\"auto\"><path d=\"M 1,1 L 14,14 M 1,14 L 14,1\" class=\"arrowMarkerPath\" style=\"stroke-width: 2.5;\"></path></marker><marker id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d_flowchart-v2-crossStart-margin\" class=\"marker cross flowchart-v2\" viewBox=\"0 0 15 15\" refX=\"-3.5\" refY=\"7.5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"12\" markerHeight=\"12\" orient=\"auto\"><path d=\"M 1,1 L 14,14 M 1,14 L 14,1\" class=\"arrowMarkerPath\" style=\"stroke-width: 2.5; stroke-dasharray: 1, 0;\"></path></marker><g class=\"root\"><g class=\"clusters\"></g><g class=\"edgePaths\"><path d=\"M293,86L293,90.167C293,94.333,293,102.667,293,110.333C293,118,293,125,293,128.5L293,132\" id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d-L_A_B_0\" class=\"edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link\" style=\";\" data-edge=\"true\" data-et=\"edge\" data-id=\"L_A_B_0\" data-points=\"W3sieCI6MjkzLCJ5Ijo4Nn0seyJ4IjoyOTMsInkiOjExMX0seyJ4IjoyOTMsInkiOjEzNn1d\" data-look=\"classic\" marker-end=\"url(#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d_flowchart-v2-pointEnd)\"></path><path d=\"M246.27,255.005L228.225,268.96C210.18,282.915,174.09,310.825,156.045,330.279C138,349.734,138,360.734,138,366.234L138,371.734\" id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d-L_B_C_0\" class=\"edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link\" style=\";\" data-edge=\"true\" data-et=\"edge\" data-id=\"L_B_C_0\" data-points=\"W3sieCI6MjQ2LjI3MDQ3MTUzNDU0Nzk0LCJ5IjoyNTUuMDA0ODQ2NTM0NTQ3OTR9LHsieCI6MTM4LCJ5IjozMzguNzM0Mzc1fSx7IngiOjEzOCwieSI6Mzc1LjczNDM3NX1d\" data-look=\"classic\" marker-end=\"url(#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d_flowchart-v2-pointEnd)\"></path><path d=\"M339.73,255.005L357.775,268.96C375.82,282.915,411.91,310.825,429.955,330.279C448,349.734,448,360.734,448,366.234L448,371.734\" id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d-L_B_D_0\" class=\"edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link\" style=\";\" data-edge=\"true\" data-et=\"edge\" data-id=\"L_B_D_0\" data-points=\"W3sieCI6MzM5LjcyOTUyODQ2NTQ1MjA2LCJ5IjoyNTUuMDA0ODQ2NTM0NTQ3OTR9LHsieCI6NDQ4LCJ5IjozMzguNzM0Mzc1fSx7IngiOjQ0OCwieSI6Mzc1LjczNDM3NX1d\" data-look=\"classic\" marker-end=\"url(#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d_flowchart-v2-pointEnd)\"></path><path d=\"M138,477.734L138,481.901C138,486.068,138,494.401,138,502.068C138,509.734,138,516.734,138,520.234L138,523.734\" id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d-L_C_E_0\" class=\"edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link\" style=\";\" data-edge=\"true\" data-et=\"edge\" data-id=\"L_C_E_0\" data-points=\"W3sieCI6MTM4LCJ5Ijo0NzcuNzM0Mzc1fSx7IngiOjEzOCwieSI6NTAyLjczNDM3NX0seyJ4IjoxMzgsInkiOjUyNy43MzQzNzV9XQ==\" data-look=\"classic\" marker-end=\"url(#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d_flowchart-v2-pointEnd)\"></path><path d=\"M448,477.734L448,481.901C448,486.068,448,494.401,448,506.068C448,517.734,448,532.734,448,540.234L448,547.734\" id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d-L_D_F_0\" class=\"edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link\" style=\";\" data-edge=\"true\" data-et=\"edge\" data-id=\"L_D_F_0\" data-points=\"W3sieCI6NDQ4LCJ5Ijo0NzcuNzM0Mzc1fSx7IngiOjQ0OCwieSI6NTAyLjczNDM3NX0seyJ4Ijo0NDgsInkiOjU1MS43MzQzNzV9XQ==\" data-look=\"classic\" marker-end=\"url(#diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d_flowchart-v2-pointEnd)\"></path></g><g class=\"edgeLabels\"><g class=\"edgeLabel\"><g class=\"label\" data-id=\"L_A_B_0\" transform=\"translate(0, 0)\"><foreignObject width=\"0\" height=\"0\"><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"labelBkg\" style=\"display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;\"><span class=\"edgeLabel\"></span></div></foreignObject></g></g><g class=\"edgeLabel\" transform=\"translate(138, 338.734375)\"><g class=\"label\" data-id=\"L_B_C_0\" transform=\"translate(-24.3671875, -12)\"><foreignObject width=\"48.734375\" height=\"24\"><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"labelBkg\" style=\"display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;\"><span class=\"edgeLabel\"><p>Popup</p></span></div></foreignObject></g></g><g class=\"edgeLabel\" transform=\"translate(448, 338.734375)\"><g class=\"label\" data-id=\"L_B_D_0\" transform=\"translate(-20.5859375, -12)\"><foreignObject width=\"41.171875\" height=\"24\"><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"labelBkg\" style=\"display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;\"><span class=\"edgeLabel\"><p>Inline</p></span></div></foreignObject></g></g><g class=\"edgeLabel\"><g class=\"label\" data-id=\"L_C_E_0\" transform=\"translate(0, 0)\"><foreignObject width=\"0\" height=\"0\"><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"labelBkg\" style=\"display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;\"><span class=\"edgeLabel\"></span></div></foreignObject></g></g><g class=\"edgeLabel\"><g class=\"label\" data-id=\"L_D_F_0\" transform=\"translate(0, 0)\"><foreignObject width=\"0\" height=\"0\"><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"labelBkg\" style=\"display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;\"><span class=\"edgeLabel\"></span></div></foreignObject></g></g></g><g class=\"nodes\"><g class=\"node default\" id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d-flowchart-A-0\" data-look=\"classic\" transform=\"translate(293, 47)\"><rect class=\"basic label-container\" style=\"\" x=\"-130\" y=\"-39\" width=\"260\" height=\"78\"></rect><g class=\"label\" style=\"\" transform=\"translate(-100, -24)\"><rect></rect><foreignObject width=\"200\" height=\"48\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;\"><span class=\"nodeLabel\"><p>Personalization API returns payload</p></span></div></foreignObject></g></g><g class=\"node default\" id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d-flowchart-B-1\" data-look=\"classic\" transform=\"translate(293, 218.8671875)\"><polygon points=\"82.8671875,0 165.734375,-82.8671875 82.8671875,-165.734375 0,-82.8671875\" class=\"label-container\" transform=\"translate(-82.3671875, 82.8671875)\"></polygon><g class=\"label\" style=\"\" transform=\"translate(-55.8671875, -12)\"><rect></rect><foreignObject width=\"111.734375\" height=\"24\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;\"><span class=\"nodeLabel\"><p>Message Type?</p></span></div></foreignObject></g></g><g class=\"node default\" id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d-flowchart-C-3\" data-look=\"classic\" transform=\"translate(138, 426.734375)\"><rect class=\"basic label-container\" style=\"\" x=\"-130\" y=\"-51\" width=\"260\" height=\"102\"></rect><g class=\"label\" style=\"\" transform=\"translate(-100, -36)\"><rect></rect><foreignObject width=\"200\" height=\"72\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;\"><span class=\"nodeLabel\"><p>Inject popup container overlay<br>on top of page</p></span></div></foreignObject></g></g><g class=\"node default\" id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d-flowchart-D-5\" data-look=\"classic\" transform=\"translate(448, 426.734375)\"><rect class=\"basic label-container\" style=\"\" x=\"-130\" y=\"-51\" width=\"260\" height=\"102\"></rect><g class=\"label\" style=\"\" transform=\"translate(-100, -36)\"><rect></rect><foreignObject width=\"200\" height=\"72\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;\"><span class=\"nodeLabel\"><p>Replace innerHTML of<br>CSS selector–matched Zone</p></span></div></foreignObject></g></g><g class=\"node default\" id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d-flowchart-E-7\" data-look=\"classic\" transform=\"translate(138, 590.734375)\"><rect class=\"basic label-container\" style=\"\" x=\"-130\" y=\"-63\" width=\"260\" height=\"126\"></rect><g class=\"label\" style=\"\" transform=\"translate(-100, -48)\"><rect></rect><foreignObject width=\"200\" height=\"96\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;\"><span class=\"nodeLabel\"><p>Position per placement setting<br>Show only latest created_at popup</p></span></div></foreignObject></g></g><g class=\"node default\" id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d-flowchart-F-9\" data-look=\"classic\" transform=\"translate(448, 590.734375)\"><rect class=\"basic label-container\" style=\"\" x=\"-102.546875\" y=\"-39\" width=\"205.09375\" height=\"78\"></rect><g class=\"label\" style=\"\" transform=\"translate(-72.546875, -24)\"><rect></rect><foreignObject width=\"145.09375\" height=\"48\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;\"><span class=\"nodeLabel\"><p>Render all returned<br>inline messages</p></span></div></foreignObject></g></g></g></g></g><defs><filter id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d-drop-shadow\" height=\"130%\" width=\"130%\"><feDropShadow dx=\"4\" dy=\"4\" stdDeviation=\"0\" flood-opacity=\"0.06\" flood-color=\"#000000\"></feDropShadow></filter></defs><defs><filter id=\"diagram-5053146dab5de1930e9fa679ede74586185b4701846dafae7ba13fc28a47ce7d-drop-shadow-small\" height=\"150%\" width=\"150%\"><feDropShadow dx=\"2\" dy=\"2\" stdDeviation=\"0\" flood-opacity=\"0.06\" flood-color=\"#000000\"></feDropShadow></filter></defs></svg>","diagramHtmlDark":"<svg id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62\" width=\"100%\" xmlns=\"http://www.w3.org/2000/svg\" class=\"flowchart\" style=\"max-width: 586px;\" viewBox=\"0 0 586 661.734375\" role=\"graphics-document document\" aria-roledescription=\"flowchart-v2\"><style>#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62{font-family:\"Redocly Mermaid Sans\",sans-serif;font-size:16px;fill:#ccc;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .error-icon{fill:#a44141;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .error-text{fill:#ddd;stroke:#ddd;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .edge-thickness-normal{stroke-width:1px;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .edge-thickness-thick{stroke-width:3.5px;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .edge-pattern-solid{stroke-dasharray:0;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .edge-thickness-invisible{stroke-width:0;fill:none;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .edge-pattern-dashed{stroke-dasharray:3;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .edge-pattern-dotted{stroke-dasharray:2;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .marker{fill:lightgrey;stroke:lightgrey;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .marker.cross{stroke:lightgrey;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 svg{font-family:\"Redocly Mermaid Sans\",sans-serif;font-size:16px;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 p{margin:0;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .label{font-family:\"Redocly Mermaid Sans\",sans-serif;color:#ccc;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .cluster-label text{fill:#F9FFFE;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .cluster-label span{color:#F9FFFE;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .cluster-label span p{background-color:transparent;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .label text,#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 span{fill:#ccc;color:#ccc;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .node rect,#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .node circle,#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .node ellipse,#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .node polygon,#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .node path{fill:#1f2020;stroke:#ccc;stroke-width:1px;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .rough-node .label text,#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .node .label text,#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .image-shape .label,#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .icon-shape .label{text-anchor:middle;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .rough-node .label,#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .node .label,#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .image-shape .label,#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .icon-shape .label{text-align:center;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .node.clickable{cursor:pointer;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .root .anchor path{fill:lightgrey!important;stroke-width:0;stroke:lightgrey;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .arrowheadPath{fill:lightgrey;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .edgePath .path{stroke:lightgrey;stroke-width:1px;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .flowchart-link{stroke:lightgrey;fill:none;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .edgeLabel{background-color:hsl(0, 0%, 34.4117647059%);text-align:center;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .edgeLabel p{background-color:hsl(0, 0%, 34.4117647059%);}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .edgeLabel rect{opacity:0.5;background-color:hsl(0, 0%, 34.4117647059%);fill:hsl(0, 0%, 34.4117647059%);}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .labelBkg{background-color:rgba(87.75, 87.75, 87.75, 0.5);}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .cluster rect{fill:hsl(180, 1.5873015873%, 28.3529411765%);stroke:rgba(255, 255, 255, 0.25);stroke-width:1px;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .cluster text{fill:#F9FFFE;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .cluster span{color:#F9FFFE;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\"Redocly Mermaid Sans\",sans-serif;font-size:12px;background:hsl(20, 1.5873015873%, 12.3529411765%);border:1px solid rgba(255, 255, 255, 0.25);border-radius:2px;pointer-events:none;z-index:100;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#ccc;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 rect.text{fill:none;stroke-width:0;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .icon-shape,#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .image-shape{background-color:hsl(0, 0%, 34.4117647059%);text-align:center;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .icon-shape p,#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .image-shape p{background-color:hsl(0, 0%, 34.4117647059%);padding:2px;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .icon-shape .label rect,#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .image-shape .label rect{opacity:0.5;background-color:hsl(0, 0%, 34.4117647059%);fill:hsl(0, 0%, 34.4117647059%);}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 .node .neo-node{stroke:#ccc;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 [data-look=\"neo\"].node rect,#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 [data-look=\"neo\"].cluster rect,#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 [data-look=\"neo\"].node polygon{stroke:url(#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 [data-look=\"neo\"].node path{stroke:url(#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-gradient);stroke-width:1px;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 [data-look=\"neo\"].node .outer-path{filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 [data-look=\"neo\"].node .neo-line path{stroke:#ccc;filter:none;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 [data-look=\"neo\"].node circle{stroke:url(#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 [data-look=\"neo\"].node circle .state-start{fill:#000000;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 [data-look=\"neo\"].icon-shape .icon{fill:url(#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 [data-look=\"neo\"].icon-shape .icon-neo path{stroke:url(#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 :root{--mermaid-font-family:\"Redocly Mermaid Sans\",sans-serif;}#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62 :root{--mermaid-font-family:\"Redocly Mermaid Sans\",sans-serif;}</style><g><marker id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62_flowchart-v2-pointEnd\" class=\"marker flowchart-v2\" viewBox=\"0 0 10 10\" refX=\"5\" refY=\"5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" class=\"arrowMarkerPath\" style=\"stroke-width: 1; stroke-dasharray: 1, 0;\"></path></marker><marker id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62_flowchart-v2-pointStart\" class=\"marker flowchart-v2\" viewBox=\"0 0 10 10\" refX=\"4.5\" refY=\"5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\"><path d=\"M 0 5 L 10 10 L 10 0 z\" class=\"arrowMarkerPath\" style=\"stroke-width: 1; stroke-dasharray: 1, 0;\"></path></marker><marker id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62_flowchart-v2-pointEnd-margin\" class=\"marker flowchart-v2\" viewBox=\"0 0 11.5 14\" refX=\"11.5\" refY=\"7\" markerUnits=\"userSpaceOnUse\" markerWidth=\"10.5\" markerHeight=\"14\" orient=\"auto\"><path d=\"M 0 0 L 11.5 7 L 0 14 z\" class=\"arrowMarkerPath\" style=\"stroke-width: 0; stroke-dasharray: 1, 0;\"></path></marker><marker id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62_flowchart-v2-pointStart-margin\" class=\"marker flowchart-v2\" viewBox=\"0 0 11.5 14\" refX=\"1\" refY=\"7\" markerUnits=\"userSpaceOnUse\" markerWidth=\"11.5\" markerHeight=\"14\" orient=\"auto\"><polygon points=\"0,7 11.5,14 11.5,0\" class=\"arrowMarkerPath\" style=\"stroke-width: 0; stroke-dasharray: 1, 0;\"></polygon></marker><marker id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62_flowchart-v2-circleEnd\" class=\"marker flowchart-v2\" viewBox=\"0 0 10 10\" refX=\"11\" refY=\"5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"11\" markerHeight=\"11\" orient=\"auto\"><circle cx=\"5\" cy=\"5\" r=\"5\" class=\"arrowMarkerPath\" style=\"stroke-width: 1; stroke-dasharray: 1, 0;\"></circle></marker><marker id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62_flowchart-v2-circleStart\" class=\"marker flowchart-v2\" viewBox=\"0 0 10 10\" refX=\"-1\" refY=\"5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"11\" markerHeight=\"11\" orient=\"auto\"><circle cx=\"5\" cy=\"5\" r=\"5\" class=\"arrowMarkerPath\" style=\"stroke-width: 1; stroke-dasharray: 1, 0;\"></circle></marker><marker id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62_flowchart-v2-circleEnd-margin\" class=\"marker flowchart-v2\" viewBox=\"0 0 10 10\" refY=\"5\" refX=\"12.25\" markerUnits=\"userSpaceOnUse\" markerWidth=\"14\" markerHeight=\"14\" orient=\"auto\"><circle cx=\"5\" cy=\"5\" r=\"5\" class=\"arrowMarkerPath\" style=\"stroke-width: 0; stroke-dasharray: 1, 0;\"></circle></marker><marker id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62_flowchart-v2-circleStart-margin\" class=\"marker flowchart-v2\" viewBox=\"0 0 10 10\" refX=\"-2\" refY=\"5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"14\" markerHeight=\"14\" orient=\"auto\"><circle cx=\"5\" cy=\"5\" r=\"5\" class=\"arrowMarkerPath\" style=\"stroke-width: 0; stroke-dasharray: 1, 0;\"></circle></marker><marker id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62_flowchart-v2-crossEnd\" class=\"marker cross flowchart-v2\" viewBox=\"0 0 11 11\" refX=\"12\" refY=\"5.2\" markerUnits=\"userSpaceOnUse\" markerWidth=\"11\" markerHeight=\"11\" orient=\"auto\"><path d=\"M 1,1 l 9,9 M 10,1 l -9,9\" class=\"arrowMarkerPath\" style=\"stroke-width: 2; stroke-dasharray: 1, 0;\"></path></marker><marker id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62_flowchart-v2-crossStart\" class=\"marker cross flowchart-v2\" viewBox=\"0 0 11 11\" refX=\"-1\" refY=\"5.2\" markerUnits=\"userSpaceOnUse\" markerWidth=\"11\" markerHeight=\"11\" orient=\"auto\"><path d=\"M 1,1 l 9,9 M 10,1 l -9,9\" class=\"arrowMarkerPath\" style=\"stroke-width: 2; stroke-dasharray: 1, 0;\"></path></marker><marker id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62_flowchart-v2-crossEnd-margin\" class=\"marker cross flowchart-v2\" viewBox=\"0 0 15 15\" refX=\"17.7\" refY=\"7.5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"12\" markerHeight=\"12\" orient=\"auto\"><path d=\"M 1,1 L 14,14 M 1,14 L 14,1\" class=\"arrowMarkerPath\" style=\"stroke-width: 2.5;\"></path></marker><marker id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62_flowchart-v2-crossStart-margin\" class=\"marker cross flowchart-v2\" viewBox=\"0 0 15 15\" refX=\"-3.5\" refY=\"7.5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"12\" markerHeight=\"12\" orient=\"auto\"><path d=\"M 1,1 L 14,14 M 1,14 L 14,1\" class=\"arrowMarkerPath\" style=\"stroke-width: 2.5; stroke-dasharray: 1, 0;\"></path></marker><g class=\"root\"><g class=\"clusters\"></g><g class=\"edgePaths\"><path d=\"M293,86L293,90.167C293,94.333,293,102.667,293,110.333C293,118,293,125,293,128.5L293,132\" id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-L_A_B_0\" class=\"edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link\" style=\";\" data-edge=\"true\" data-et=\"edge\" data-id=\"L_A_B_0\" data-points=\"W3sieCI6MjkzLCJ5Ijo4Nn0seyJ4IjoyOTMsInkiOjExMX0seyJ4IjoyOTMsInkiOjEzNn1d\" data-look=\"classic\" marker-end=\"url(#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62_flowchart-v2-pointEnd)\"></path><path d=\"M246.27,255.005L228.225,268.96C210.18,282.915,174.09,310.825,156.045,330.279C138,349.734,138,360.734,138,366.234L138,371.734\" id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-L_B_C_0\" class=\"edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link\" style=\";\" data-edge=\"true\" data-et=\"edge\" data-id=\"L_B_C_0\" data-points=\"W3sieCI6MjQ2LjI3MDQ3MTUzNDU0Nzk0LCJ5IjoyNTUuMDA0ODQ2NTM0NTQ3OTR9LHsieCI6MTM4LCJ5IjozMzguNzM0Mzc1fSx7IngiOjEzOCwieSI6Mzc1LjczNDM3NX1d\" data-look=\"classic\" marker-end=\"url(#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62_flowchart-v2-pointEnd)\"></path><path d=\"M339.73,255.005L357.775,268.96C375.82,282.915,411.91,310.825,429.955,330.279C448,349.734,448,360.734,448,366.234L448,371.734\" id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-L_B_D_0\" class=\"edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link\" style=\";\" data-edge=\"true\" data-et=\"edge\" data-id=\"L_B_D_0\" data-points=\"W3sieCI6MzM5LjcyOTUyODQ2NTQ1MjA2LCJ5IjoyNTUuMDA0ODQ2NTM0NTQ3OTR9LHsieCI6NDQ4LCJ5IjozMzguNzM0Mzc1fSx7IngiOjQ0OCwieSI6Mzc1LjczNDM3NX1d\" data-look=\"classic\" marker-end=\"url(#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62_flowchart-v2-pointEnd)\"></path><path d=\"M138,477.734L138,481.901C138,486.068,138,494.401,138,502.068C138,509.734,138,516.734,138,520.234L138,523.734\" id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-L_C_E_0\" class=\"edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link\" style=\";\" data-edge=\"true\" data-et=\"edge\" data-id=\"L_C_E_0\" data-points=\"W3sieCI6MTM4LCJ5Ijo0NzcuNzM0Mzc1fSx7IngiOjEzOCwieSI6NTAyLjczNDM3NX0seyJ4IjoxMzgsInkiOjUyNy43MzQzNzV9XQ==\" data-look=\"classic\" marker-end=\"url(#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62_flowchart-v2-pointEnd)\"></path><path d=\"M448,477.734L448,481.901C448,486.068,448,494.401,448,506.068C448,517.734,448,532.734,448,540.234L448,547.734\" id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-L_D_F_0\" class=\"edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link\" style=\";\" data-edge=\"true\" data-et=\"edge\" data-id=\"L_D_F_0\" data-points=\"W3sieCI6NDQ4LCJ5Ijo0NzcuNzM0Mzc1fSx7IngiOjQ0OCwieSI6NTAyLjczNDM3NX0seyJ4Ijo0NDgsInkiOjU1MS43MzQzNzV9XQ==\" data-look=\"classic\" marker-end=\"url(#diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62_flowchart-v2-pointEnd)\"></path></g><g class=\"edgeLabels\"><g class=\"edgeLabel\"><g class=\"label\" data-id=\"L_A_B_0\" transform=\"translate(0, 0)\"><foreignObject width=\"0\" height=\"0\"><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"labelBkg\" style=\"display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;\"><span class=\"edgeLabel\"></span></div></foreignObject></g></g><g class=\"edgeLabel\" transform=\"translate(138, 338.734375)\"><g class=\"label\" data-id=\"L_B_C_0\" transform=\"translate(-24.3671875, -12)\"><foreignObject width=\"48.734375\" height=\"24\"><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"labelBkg\" style=\"display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;\"><span class=\"edgeLabel\"><p>Popup</p></span></div></foreignObject></g></g><g class=\"edgeLabel\" transform=\"translate(448, 338.734375)\"><g class=\"label\" data-id=\"L_B_D_0\" transform=\"translate(-20.5859375, -12)\"><foreignObject width=\"41.171875\" height=\"24\"><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"labelBkg\" style=\"display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;\"><span class=\"edgeLabel\"><p>Inline</p></span></div></foreignObject></g></g><g class=\"edgeLabel\"><g class=\"label\" data-id=\"L_C_E_0\" transform=\"translate(0, 0)\"><foreignObject width=\"0\" height=\"0\"><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"labelBkg\" style=\"display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;\"><span class=\"edgeLabel\"></span></div></foreignObject></g></g><g class=\"edgeLabel\"><g class=\"label\" data-id=\"L_D_F_0\" transform=\"translate(0, 0)\"><foreignObject width=\"0\" height=\"0\"><div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"labelBkg\" style=\"display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;\"><span class=\"edgeLabel\"></span></div></foreignObject></g></g></g><g class=\"nodes\"><g class=\"node default\" id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-flowchart-A-0\" data-look=\"classic\" transform=\"translate(293, 47)\"><rect class=\"basic label-container\" style=\"\" x=\"-130\" y=\"-39\" width=\"260\" height=\"78\"></rect><g class=\"label\" style=\"\" transform=\"translate(-100, -24)\"><rect></rect><foreignObject width=\"200\" height=\"48\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;\"><span class=\"nodeLabel\"><p>Personalization API returns payload</p></span></div></foreignObject></g></g><g class=\"node default\" id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-flowchart-B-1\" data-look=\"classic\" transform=\"translate(293, 218.8671875)\"><polygon points=\"82.8671875,0 165.734375,-82.8671875 82.8671875,-165.734375 0,-82.8671875\" class=\"label-container\" transform=\"translate(-82.3671875, 82.8671875)\"></polygon><g class=\"label\" style=\"\" transform=\"translate(-55.8671875, -12)\"><rect></rect><foreignObject width=\"111.734375\" height=\"24\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;\"><span class=\"nodeLabel\"><p>Message Type?</p></span></div></foreignObject></g></g><g class=\"node default\" id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-flowchart-C-3\" data-look=\"classic\" transform=\"translate(138, 426.734375)\"><rect class=\"basic label-container\" style=\"\" x=\"-130\" y=\"-51\" width=\"260\" height=\"102\"></rect><g class=\"label\" style=\"\" transform=\"translate(-100, -36)\"><rect></rect><foreignObject width=\"200\" height=\"72\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;\"><span class=\"nodeLabel\"><p>Inject popup container overlay<br>on top of page</p></span></div></foreignObject></g></g><g class=\"node default\" id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-flowchart-D-5\" data-look=\"classic\" transform=\"translate(448, 426.734375)\"><rect class=\"basic label-container\" style=\"\" x=\"-130\" y=\"-51\" width=\"260\" height=\"102\"></rect><g class=\"label\" style=\"\" transform=\"translate(-100, -36)\"><rect></rect><foreignObject width=\"200\" height=\"72\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;\"><span class=\"nodeLabel\"><p>Replace innerHTML of<br>CSS selector–matched Zone</p></span></div></foreignObject></g></g><g class=\"node default\" id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-flowchart-E-7\" data-look=\"classic\" transform=\"translate(138, 590.734375)\"><rect class=\"basic label-container\" style=\"\" x=\"-130\" y=\"-63\" width=\"260\" height=\"126\"></rect><g class=\"label\" style=\"\" transform=\"translate(-100, -48)\"><rect></rect><foreignObject width=\"200\" height=\"96\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;\"><span class=\"nodeLabel\"><p>Position per placement setting<br>Show only latest created_at popup</p></span></div></foreignObject></g></g><g class=\"node default\" id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-flowchart-F-9\" data-look=\"classic\" transform=\"translate(448, 590.734375)\"><rect class=\"basic label-container\" style=\"\" x=\"-102.546875\" y=\"-39\" width=\"205.09375\" height=\"78\"></rect><g class=\"label\" style=\"\" transform=\"translate(-72.546875, -24)\"><rect></rect><foreignObject width=\"145.09375\" height=\"48\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;\"><span class=\"nodeLabel\"><p>Render all returned<br>inline messages</p></span></div></foreignObject></g></g></g></g></g><defs><filter id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-drop-shadow\" height=\"130%\" width=\"130%\"><feDropShadow dx=\"4\" dy=\"4\" stdDeviation=\"0\" flood-opacity=\"0.06\" flood-color=\"#FFFFFF\"></feDropShadow></filter></defs><defs><filter id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-drop-shadow-small\" height=\"150%\" width=\"150%\"><feDropShadow dx=\"2\" dy=\"2\" stdDeviation=\"0\" flood-opacity=\"0.06\" flood-color=\"#FFFFFF\"></feDropShadow></filter></defs><linearGradient id=\"diagram-c0d9e2a52d21e19bb36b55bd231b46007d00132bdba1d994101ada044b199a62-gradient\" gradientUnits=\"objectBoundingBox\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\"><stop offset=\"0%\" stop-color=\"#cccccc\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"hsl(180, 0%, 18.3529411765%)\" stop-opacity=\"1\"></stop></linearGradient></svg>"},"children":["flowchart TD\n    A[Personalization API returns payload] --> B{Message Type?}\n    B -->|Popup| C[Inject popup container overlay\\non top of page]\n    B -->|Inline| D[Replace innerHTML of\\nCSS selector–matched Zone]\n    C --> E[Position per placement setting\\nShow only latest created_at popup]\n    D --> F[Render all returned\\ninline messages]\n"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"20%","data-label":"Message Type"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Message Type"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"80%","data-label":"SDK Rendering Behavior"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["SDK Rendering Behavior"]}," "]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Popup"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Injects a popup container overlay on top of the page. The popup is positioned according to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["placement"]}," setting configured in the campaign. Only the popup with the latest ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["created_at"]}," timestamp is displayed when multiple popups are returned."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Inline"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Replaces the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["innerHTML"]}," of the DOM element matched by the campaign's CSS selector (Zone ID). All returned inline messages are rendered. If the selector does not match any element, the message is silently skipped."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"next-steps","__idx":6},"children":["Next Steps"]},{"$$mdtype":"Tag","name":"Cards","attributes":{"columns":3,"cardMinWidth":240},"children":[{"$$mdtype":"Tag","name":"Card","attributes":{"title":"SDK Integration","icon":"code","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/products/marketing-cloud/engage-studio/experiences/sdk-integration"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Install the TD Web SDK, initialize with personalization, and configure framework-specific page view tracking."]}]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Event Tracking","icon":"activity","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/products/marketing-cloud/engage-studio/experiences/event-tracking"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Define business events using GA4-compatible naming for RT 2.0 targeting."]}]}]}]},"headings":[{"value":"Setup & Prerequisites","id":"setup--prerequisites","depth":1},{"value":"Checklist","id":"checklist","depth":2},{"value":"Treasure AI platform (IT / Data Engineer)","id":"treasure-ai-platform-it--data-engineer","depth":3},{"value":"Audience Studio (Data Engineer / Marketer)","id":"audience-studio-data-engineer--marketer","depth":3},{"value":"Website (Developer)","id":"website-developer","depth":3},{"value":"How the SDK Renders Messages","id":"how-the-sdk-renders-messages","depth":2},{"value":"Next Steps","id":"next-steps","depth":2}],"frontmatter":{"seo":{"title":"In-Browser Messaging — Setup & Prerequisites","description":"Checklist of RT Personalization 2.0 and TD Web SDK requirements before creating In-Browser Message campaigns in Engage Studio."}},"lastModified":"2026-06-18T03:34:22.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/products/marketing-cloud/engage-studio/experiences/setup-and-prerequisites","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}