Introduction
Many Salespanel users utilize Pipedrive to manage their customer relationships and often embed Pipedrive webforms on their websites to capture leads. However, when these forms are embedded using iframes, it can prevent Salespanel from tracking form submissions due to the isolated nature of iframes. This article provides solutions to effectively capture lead data from iframe-embedded Pipedrive webforms into Salespanel.
Understanding the Problem
This isolation means that any scripts or tracking mechanisms implemented on the main website cannot directly interact with the content inside the iframe. Consequently, binding event listeners or deploying tracking codes directly on the parent page does not work for capturing activities that occur within the iframe, such as form submissions. This separation is by design, intended to enhance security and prevent cross-site scripting attacks, but it also limits the functionality of external tracking tools which rely on direct access to form elements and submission events to gather data.
Workarounds and Solutions
To circumvent the iframe issue, we suggest the following methods:
1. Redirect to a thank-you page with URL parameter ?sp_em={{email}}
You can modify the Pipedrive webform settings to redirect users to a custom URL after submission. The basic idea is that this URL should have sp_em URL parameter that needs to point to the email address from the form submission data. Salespanel tracking pixel can instantly pick up the PII, remove it instantly from the URL, and identify the visitor.
This method is explained in detail here: https://support.salespanel.io/hc/en-us/articles/900001729763-Identity-resolution-using-sp-em-URL-parameter
2. Post-Message Browser Communication
Assumptions:
You have basic JavaScript knowledge, and we assume the Pipedrive webform emits such events.
You can add custom JavaScript to your main webpage and within the Pipedrive iframe (this may require modifying the form's source code if Pipedrive allows).
You will need this function from the SDK: https://support.salespanel.io/hc/en-us/articles/900001761803-Identify-and-track-your-leads-on-Salespanel-data-platform-using-a-client-side-Javascript-method
Setup:
On the Main Page:
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
// Replace 'https://example.com' with the URL where your iframe form is hosted
if (event.origin !== "https://example.com") return;
if (event.data === 'FormSubmitted') {
// Logic to handle form submission event
// You can track the event or redirect the user as needed
console.log("Form submitted!");
}
}
Inside the Pipedrive iframe:
// Code to send a message to the parent window upon form submission
document.getElementById("myForm").addEventListener("submit", function() {
window.parent.postMessage('FormSubmitted', '*'); // Use '*' for testing only; specify your domain in production
});
Security Note: Always specify an explicit target origin, not *, in production environments to ensure security.
3. Direct API Integration
Assumption: You are comfortable creating custom forms and interfacing with APIs.
Solution:
Create a custom webform on your WordPress/Wix site that matches the fields in your Pipedrive form.
Set the form to submit data directly to Pipedrive via their API and also send the data to Salespanel for tracking.
You will need Salespanel's REST API endpoint: https://salespanel.io/docs/#identify-contact
Please be mindful that you will have to capture visitor-id of the visitor from the Salespanel cookie 'track_uid' and pass it to connect the visitor with an email that you have received from the Pipedrive most likely from a webhook.
Bottomline
Using iframes to embed webforms can limit interaction with tracking codes due to browser security measures. By implementing one of the suggested solutions above, you can ensure that lead generation activities are fully integrated with Salespanel's tracking capabilities, providing you with comprehensive analytics and effective data utilization.
For additional assistance or to discuss further customization options, please contact our support team.