Dynamic Chat: Triggering Conversational Flows After Form Submission

[#1]

This documentation is designed to empower your marketing and development teams to seamlessly integrate conversational experiences into your website.

By triggering automated chat flows after a user submits a form, you can capture additional details, nurture leads in real-time, and personalize follow-ups—all while passing form data effortlessly to Marketo for deeper engagement tracking.

Whether you're driving product demos, content downloads, or meeting bookings, the Conversations SDK makes it simple to extend traditional forms into dynamic, low-friction interactions. This guide draws from official Adobe documentation and best practices to help you implement these features quickly.

What Are Conversational Flows?

Conversational Flows are pre-designed, automated chat sequences in Adobe Dynamic Chat that guide visitors through interactive dialogues. Unlike static forms, they feel natural and engaging, using branching logic, conditional responses, and rich media (e.g., documents, calendars) to convert visitors.

Key Benefits

• Low-Friction Engagement: Reduce form abandonment by breaking questions into bite-sized chats.
• Real-Time Personalization: Trigger flows based on actions like form submissions, CTA clicks, or page loads.
• Seamless Data Flow: Automatically sync captured data (e.g., email, preferences) with Marketo leads.
• Multi-Trigger Support: Flows can fire multiple times for the same visitor without priority conflicts.

Feature	Description	Use Case Example
Automated Branching	Create decision trees based on user responses (e.g., "Yes/No" paths).	Route users to demo vs. pricing info.
Info Capture	Collect structured data (e.g., email, phone) mid-conversation.	Gather follow-up details post-download.
Rich Media	Embed calendars, documents, or videos.	Schedule meetings or share ebooks.
Triggers	Launch via SDK on events like form submit or link click.	Post-form nurture for high-intent leads.

 

Overview of the Conversations SDK

The Conversations SDK is a lightweight JavaScript library that embeds Dynamic Chat into your website. It allows you to:

• Trigger flows programmatically (e.g., after form validation).
• Pass pre-filled form data to personalize the chat.
• Track engagements back to Marketo for segmentation and automation.

The core method is window.AdobeDX.conversations(options), which initializes and triggers a flow with customizable UI type and pre-filled content.

 

Prerequisites

Before implementation:

1. Dynamic Chat Instance: Ensure access to Adobe Marketo Engage > Dynamic Chat.
2. Domain Allowlisting: Add your website domain in Dynamic Chat > Configuration > Chatbot > Installation (allow list domains)
3. JavaScript Snippet: Copy the embed code from Dynamic Chat > Configuration > Chatbot > Installation.

 

Step-by-Step Guide: Triggering Flows After Form Submission

Follow these steps to launch a Conversational Flow immediately after a user submits a form, enhancing the experience with follow-up questions or offers.

Step 1: Create Your Conversational Flow

1. Log in to Marketo Engage > Dynamic Chat > Conversational Flows.
2. Click Create New Flow and select a template (e.g., "Lead Qualification" or "Content Gating").
3. Design the flow:
   • Add a Welcome Message (e.g., "Thanks for your interest! What's your biggest challenge?").
   • Insert Info Capture Cards for additional fields (e.g., company size, role).
   • Add branching (e.g., if "Budget Approved" → Calendar integration for booking).
   • Include a Call-to-Action (e.g., "Send Resources" or "End Chat").
4. Publish the flow. Note the Flow ID (unique string from UI Settings tab, e.g., flow-12345).

Step 2: Install the SDK on Your Page

Add the Dynamic Chat JavaScript from Dynamic Chat > Chatbot > Installation to your landing page (ideally just before </body>).

Step 3: Integrate with Your Form

• Use a Marketo form embed or custom form.
• On successful submission (e.g., via onSuccess callback for Marketo forms), call window.AdobeDX.conversations() to trigger the flow.

SDK Configuration Options

The conversations method accepts an options object with the following properties:

<script>
    window.addEventListener('load', function() {
      window.AdobeDX.conversations({
        id: string,         
	type: string,
	selector: string | Node,
	content: {
	  form:{
		emailAddress: string,
		leadAttributes:{
			<attribute key>: string
		},
		companyAttributes:{
			<attribute key>: string
		}
	   }
	}
      });
    });
</script>

Property	Requirement	Default	Description
id	Required	N/A	Unique string ID for the Conversational Flow (from UI Settings tab).
type	Required	N/A	UI type: 'chatbot' (floating widget), 'popup' (modal overlay), or 'inline' (embedded in a container).
selector	Optional (Required for inline)	N/A	CSS selector or HTML Node for rendering the flow (e.g., '#chat-container').
divId	Optional (Required for inline, to be deprecated)	N/A	Legacy container ID for inline rendering.
content	Optional	{}	Object for pre-filling data. Includes form with emailAddress, leadAttributes (e.g., { firstName: 'John' }), and companyAttributes (e.g., { industry: 'Tech' }).

Example: Marketo Form Integration

For a standard Marketo form, trigger a popup flow post-submission:

// Trigger popup flow with pre-filled form data
      if (window.AdobeDX && window.AdobeDX.conversations) {
        window.AdobeDX.conversations({
          id: 'flow-12345',  // Your Flow ID
          type: 'popup',     // Or 'chatbot' for widget
          content: {
            form: {
              emailAddress: values.Email,
              leadAttributes: {
                firstName: values.FirstName,
                phone: values.Phone
              },
              companyAttributes: {
                company: values.Company,
                industry: values.Industry || 'Unknown'
              }
            }
          }
        }); 

Example: Custom HTML Form

For non-Marketo forms, handle submission via JavaScript and trigger an inline flow:

<!-- Custom Form with Inline Container -->
<form id="customForm">
  <input type="email" id="email" placeholder="Email" required>
  <input type="text" id="company" placeholder="Company" required>
  <button type="submit">Submit</button>
</form>
<div id="chat-container" style="display: none; border: 1px solid #ccc; padding: 20px;"></div>  <!-- Inline container -->

<script>
  document.getElementById('customForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = {
      emailAddress: document.getElementById('email').value,
      leadAttributes: { firstName: 'Jane' },  // Example; pull from form
      companyAttributes: { company: document.getElementById('company').value }
    };
    
    // Submit form data to your backend (e.g., via fetch/AJAX)
    fetch('/submit-form', {
      method: 'POST',
      body: JSON.stringify(formData)
    }).then(() => {
      // Trigger inline flow post-submission
      if (window.AdobeDX && window.AdobeDX.conversations) {
        window.AdobeDX.conversations({
          id: 'flow-12345',       // Your Flow ID
          type: 'inline',         // Embed in container
          selector: '#chat-container',  // Or document.getElementById('chat-container')
          content: { form: formData }
        });
        document.getElementById('chat-container').style.display = 'block';  // Show container
      }
    });
  });
</script>

Step 4: Pass Form Details to the Flow

• Use the content.form object to pre-populate chat fields with form data.
• Map these in your flow design via variable tokens (e.g., {{emailAddress}} or {{leadAttributes.firstName}}).
• Data is securely passed to Marketo and associated with the visitor's lead record.

Parameter Path	Type	Description	Example Value
content.form.emailAddress	String	Lead's email for identification.	'user@example.com'
content.form.leadAttributes	Object	Key-value pairs for lead fields (e.g., name, role).	{ firstName: 'John' }
content.form.companyAttributes	Object	Key-value pairs for company fields (e.g., size, industry).	{ industry: 'Tech' }

Step 5: Test and Deploy

1. Preview: Use the Flow Builder's preview mode.
2. Test on Site: Submit the form and verify the chat renders with pre-filled data (e.g., popup appears, fields auto-populate).
3. Monitor: Check Dynamic Chat > Conversational Flows > Your Conversational Flow > reports for engagement metrics (e.g., completion rate).
4. Publish: Embed on production pages.

Best Practices

• UI Type Selection: Use 'chatbot' for persistent engagement, 'popup' for immediate post-form interrupts, and 'inline' for embedded experiences.
• Keep It Concise: Limit flows to 3-5 steps to maintain engagement.
• Mobile Optimization: Test pop-ups on responsive designs.
• Personalization: Use form data to tailor messages (e.g., "Hi {{leadAttributes.firstName}}, based on your role...").
• Fallbacks: Add a "Not Now" option to avoid frustration.
• Attributes that are being passed to Conversational Flow should be Marketo attributes
• A/B Testing: Duplicate flows in Dynamic Chat to test variations.

 

Troubleshooting

Issue	Possible Cause	Solution
Flow Doesn't Trigger	SDK not loaded, invalid id, or domain not whitelisted	Verify script tag, Flow ID, and allowed domains.
Data Not Pre-Filled	Mismatched variable names in Marketo Attributes	Check keys match flow tokens (e.g., leadAttributes.firstName).
Inline Not Rendering	Missing selector or divId.	Provide valid CSS selector/Node; migrate from divId.
Form Redirects Unexpectedly	onSuccess not returning false.	Add return false; to prevent default.
CORS Errors	Domain mismatch.	Re-add domain in Security Settings.
Low Engagement	Flow too long or irrelevant.	Review analytics and shorten paths.

• Explore More: Check Dynamic Chat Tutorials for video walkthroughs.
• Get Started: Create your first flow today and see conversions soar!