Effective January 27, 2025, the "One-to-One Consent" rule mandates that each individual contact requires specific, explicit written consent from the consumer. General or blanket consents will no longer suffice.
To ensure your lead generation complies with the Telephone Consumer Protection Act (TCPA), it's crucial to obtain explicit written consent from your users before initiating contact. With Heyflow, you can effectively achieve this by incorporating consent requests, such as checkboxes, into your flows.
There are two ways to ensure TCPA-compliance in your flow:
Option 1: Simple Setup with a single vendor
If it’s clear who will contact the lead in the future, you can use a straightforward setup by adding the Checkbox block to your flow and configuring the necessary settings. Here’s how:
1. Adding the Checkbox
In your Heyflow editor, open the "Blocks" tab. Under the "Input" category, locate the "Simple Checkbox" block. Drag and drop it to your desired position within the flow.
2. Customizing the Content
Edit the checkbox text to reflect the specific consent required for the intended communication. For example: "I consent to receive marketing communications via phone and email from [your company]."
💡 Tip: We recommend inserting links to your privacy policy or terms and conditions to maintain transparency.
3. Design and Formatting
Highlight the checkbox text and use the formatting tools to adjust the font, size, and color to align with your flow's design. Customize the checkbox appearance by selecting appropriate icons and colors that match your brand identity.
4. Validation and Mandatory Fields
Ensure the checkbox is marked as required, preventing users from proceeding without providing consent. Define clear and understandable error messages for instances where users attempt to navigate to the next screen without checking the box.
Option 2: Advanced Setup with multiple vendors
When multiple buyers or vendors may contact a lead, ensuring compliance and maintaining transparency requires a more advanced setup. For example, this might occur if you're reselling leads to different vendors based on specific criteria, such as a lead’s ZIP code.
How can this approach help you?
Dynamic Buyer Assignment: Automatically assign the appropriate buyer based on criteria like the lead's entered ZIP code, creating a seamless and accurate experience.
Compliance-Friendly UI: Dynamically update the buyer’s name within the flow, fostering transparency and helping you adhere to TCPA requirements.
Customizable Flexibility: Adapt the setup to other criteria—such as location, preferences, or business needs—offering a tailored experience for your leads.
Currently, this advanced setup requires integrating custom code (HTML and JavaScript) into your flow.
❗Please note: These features are not available in all plans. If it’s not included in your plan, get your TCPA kit by letting us know in the chat.
Example Scenario: Selling Leads Based on ZIP Code
Let’s set this up for the scenario when you’re reselling leads and depending on the ZIP code, another company would contact the lead. The following allocation should apply:
If a ZIP code is between 10000 and 20000, leads will be routed to "Foobar Inc".
If a ZIP code is between 20001 and 30000, leads will be routed to "Woobar Inc".
If a ZIP code is between 30001 and 40000, leads will be routed to "Barwoo Inc".
If a ZIP code is between 40001 and 50000, leads will be routed to "Barfoo Inc".
If a ZIP code is between 50001 and 60000, leads will be routed to "Foobarus Inc".
If a ZIP code is between 60001 and 70000, leads will be routed to "Woobarus Inc".
If a ZIP code is between 70001 and 80000, leads will be routed to "Foobarus Inc" .
If a ZIP code is between 80001 and 90000, leads will be routed to "Woobarus Inc",.
If a ZIP code is between 90001 and 99999, leads will be routed to "Blubb Inc”.
Generally, there are three steps we need to consider in our advanced setup:
Prepare the Input: Add a required Input Block with a matching system label, and use regex and the native input type to ensure that only valid inputs are possible.
Custom HTML: Add a dynamic checkbox on the submit screen that displays the buyer's name based on the ZIP code entered earlier in the flow.
Custom JavaScript: Use JavaScript to process the ZIP code, determine the matching buyer, and dynamically update the checkbox with the buyer’s name, ensuring the correct lead allocation.
Step 1: Input Preparation
After adding an Input Block to your flow where you would like to collect the user's zip code, please follow these steps to configure the block:
Set the Input Block to "Required" to ensure that the user enters their zip code.
Under "Labels & Variables," enter the system label that corresponds to the JavaScript variable in order to link this field with our checkbox (in this example, the label is zip).
Under "Validation", click on "Show regular expression" and enter the regex code that will validate the input (in our case we want to see 5 digits: ^[0-9]{5}$). Then, select "Unfocus" to trigger the validation when the user leaves the input field. Adjust the error message if necessary.
Expert Tip: Under “Validations”, set the native input type according to the required input, e.g. in our case numbers, to make sure users only insert numbers and no letters.
💡You can find more detailed instructions for configuring the input field, regex, and variables, by clicking here.
Step 2: Custom HTML
Add the HTML Block at the location in the flow where you want your checkbox to be displayed. You can find more information here.
Copy and paste the following HTML code into your HTML block to create a checkbox element with a placeholder which dynamically displays the buyer's name:
< div class = "block-content simple-checkbox simple-checkbox-block inner-narrow" id = "simple-checkbox-block-checkbox-4c011039" > <div style="padding-top:10px; padding-bottom:20px; ">
<label for="checkbox-4c011039">
<input type="checkbox" hey-type="simple-checkbox" data-type="simple-checkbox" id="checkbox-4c011039" name="checkbox-4c011039" data-label="User agreement" data-answer="✔" value="✔" required="required" data-initial-required="true"> <div class="simple-checkbox-content" style="display:flex;">
<span class="checkbox"> <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none"></rect> <polyline points="216 72.005 104 184 48 128.005" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></polyline> </svg> </span> <div class="label-container">
<span class="simple-checkbox-text rich-text"> <p>
I agree to the all the TCPA things that are relevant to your businesscase.
</p>
<p>
I agree to share my information with <span id="vendortcpa">Test</span>
</p>
</span>
</div>
</div>
</label>
</div>
</div
Step 3: Custom JavaScript
To enhance this functionality, use custom JavaScript to define specific ZIP code ranges. When a user enters a ZIP code within a particular range, the lead is automatically routed to the corresponding buyer.
The checkbox element will then dynamically update, displaying the name of the designated buyer.
💡You can find the Code editor on the left side of the Build section. Here, click on JavaScript at the top.
This JavaScript dynamically assigns the buyer’s name based on the ZIP code provided:
const zipRangeMap =
{
"10000-20000": "Foobar Inc",
"20001-30000": "Woobar Inc",
"30001-40000": "Barfoo Inc",
"40001-50000": "Barwoo Inc",
"50001-60000": "Foobarus Inc",
"60001-70000": "Woobarus Inc",
"70001-80000": "Foobarus Inc",
"80001-90000": "Woobarus Inc",
"90001-99999": "Blubb Inc"
}
// Making use of the heyflow events API <https://www.heyflow.help/en/articles/6885210-heyflow-events-api>
window.addEventListener('heyflow-change', (event) => {
const fields = event.detail.fieldsSimple; if (fields.zip) {
/** Alternatively, you could use a third-party service/script here that you
send the data to and give you back a matching partner */
const zipCode = Number(fields.zip);
const matchingRange = Object.keys(zipRangeMap).find((key)=> {
const [lower, higher] = key.split("-");
if (zipCode >= lower && zipCode <= higher) {
return true
} return false
})
if (matchingRange) {
const partner = zipRangeMap[matchingRange];
// Potentially we would want to find the element to update a lot earlier
// If we would use the flow embedded, we would have to make sure to use the shadowDom for the query
document.getElementById("vendortcpa").innerText = partner;
}
}
})
💡You can learn more about JavaScript here.
❗Important: Please test your setup very thoroughly. If you need help with your setup, let us know in the chat!