Skip to main content

Tatango + Engaging Networks Integration

D
Written by Dakota Fearn
Updated over a week ago

Overview

The Tatango + Engaging Networks integration allows you to automatically capture new SMS opt-ins from a variety of Engaging Networks form types—including donations, surveys, petitions, and more. In addition to capturing mobile opt-ins, this integration also syncs donation data, enabling you to segment and personalize your SMS campaigns.

This guide walks you through the steps to configure the integration in both Tatango and Engaging Networks.


Step 1: Configure in Tatango

  1. Navigate to: My Account → Integrations

  2. Find Engaging Networks and click Configure

  3. Select the Tatango list you want new subscribers to be added to

  4. Map your fields (e.g., First Name, Email, etc.)

  5. After mapping, you’ll receive a Webhook URL

    • Copy this URL — you’ll use it in the next step


Step 2: Embed the Code in Engaging Networks

  1. Create a new Code Block component

    • Label it: Tatango SMS Opt-In

    • Paste the following JavaScript into the component: (Important: Replace {webhookUrl} with the actual Webhook URL you copied from Tatango.)

    <script>
    document.addEventListener('DOMContentLoaded', function () {
    const form = document.querySelector('form[action*="/page/"]');

    if (form) {
    form.addEventListener('submit', function (e) {
    // e.preventDefault(); // Uncomment for testing without redirect

    const formData = new FormData(form);
    const actionUrl = form.getAttribute('action') || '';
    const pageTypeMatch = actionUrl.match(/page\/\d+\/([^/]+)/);
    const pageType = pageTypeMatch ? pageTypeMatch[1] : 'unknown';

    const urlParams = new URLSearchParams(window.location.search);

    const payload = {
    page_url: window.location.href,
    page_title: document.title,
    referrer: document.referrer,
    user_agent: navigator.userAgent,
    page_type: pageType,

    // UTM fields — null if missing
    utm_campaign: urlParams.get('utm_campaign') || null,
    utm_medium: urlParams.get('utm_medium') || null,
    utm_source: urlParams.get('utm_source') || null,
    utm_term: urlParams.get('utm_term') || null,
    utm_content: urlParams.get('utm_content') || null
    };

    formData.forEach((value, key) => {
    payload[key] = value;
    });

    console.log('Form submission payload:', payload);

    fetch('{webhookUrl}', {
    method: 'POST',
    headers: {
    'Content-Type': 'application/json'
    },
    body: JSON.stringify(payload)
    });
    });
    } else {
    console.error('EN form not found on this page.');
    }
    });
    </script>

  2. Save this Code Block to your Component Library for future reuse.

  3. On any form where you want to collect opt-ins:

    • Ensure you have a field labeled Cell Phone

      • This should be mapped to supporter.phoneNumber

    • Directly beneath the Cell Phone field, add a Text Block with your disclaimer language.

      • Example: “Sign up for text updates. By participating, you agree to the terms & privacy policy for autodialed donation messages from [Your Organization] to the phone number you provide. No consent required to buy. Reply HELP for help, STOP to end. Msg & data rates may apply.”

    • On the final page of the form (where the Submit button appears):

      • Drag and drop the Tatango SMS Opt-In Code Block

      • Place it directly above the Submit button


Now, when a supporter completes your form, their mobile number and donation details will be automatically synced to Tatango, ready for segmentation and personalized engagement.

If you have questions or need assistance, reach out to your Tatango Customer Success Manager.

Did this answer your question?