H# How to Add a Lead Generation Form to Your Video

Cincopa allows you to add a lead generation form overlay to your video player, enabling you to gather valuable user information such as email addresses while keeping viewers engaged.

Lead Generation Form Configuration Options

Overview of Arguments

How to Enable a Lead Generation Form

To enable the lead generation form, you need to configure the arguments to define the form's behavior, content, and timing. Below is the full example with detailed clarifications.

Example:

<script type="text/javascript">
cincopa.registeredFunctions = cincopa.registeredFunctions || [];
cincopa.registeredFunctions.push({
	func: function (name, data, gallery) {
    // Enable the lead generation overlay
    gallery.args.html_overlay_disabled = 'true';

    // Define texts to display in the overlay
    gallery.args.html_overlay_lower = 'Provide your contact information below:';
    gallery.args.html_overlay_upper = 'Stay Updated!';

    // Specify when the form is displayed
    gallery.args.html_overlay_show = 'before_first'; // Options: on_at_00:01:00 (at a specific time), on_first, on_last, etc.

    // Define the structure of the form fields
    var formJsonObj = {
      fields: [
        {
          "name": "email",
          "label": "Email Address",
          "type": "string",
          "fieldType": "text",
          "description": "Your email will be used to send updates.",
          "groupName": "contactinformation",
          "displayOrder": -1,
          "required": true,
          "enabled": true,
          "placeholder": "Enter your email",
          "fieldWidth": "100"
        },
        {
          "name": "submit",
          "label": "Submit",
          "fieldType": "submit",
          "displayOrder": 700,
          "fieldWidth": "100"
        }
      ]
    };

    // Assign the form fields to the overlay
    gallery.args.html_overlay_fields = 'json'; // Use JSON format for fields
    gallery.args.html_overlay_formFields = JSON.stringify(formJsonObj); // Convert form object to JSON
  }, filter: "runtime.on-args"
});
</script>

Explanation of the Arguments

1. html_overlay_disabled:

   • Enables or disables the lead generation overlay. Set this argument to 'true' to enable it.
   • Example: gallery.args.html_overlay_disabled = 'true';

2. html_overlay_lower:

   • Specifies the text displayed in the lower part of the overlay form.
   • Example: gallery.args.html_overlay_lower = 'Provide your contact information below:';

3. html_overlay_upper:

   • Specifies the text displayed in the upper part of the overlay form.
   • Example: gallery.args.html_overlay_upper = 'Stay Updated!';

4. html_overlay_show:

   • Determines when the form will be displayed. You can use predefined options:
     • before_first: Displays the form before the video starts. Useful for collecting user information upfront.
     • on_first: Displays the form at the start of the video.
     • on_last: Displays the form near the end of the video.
     • Custom Time: Use on_at_00:01:00 to display the form at a specific timestamp, such as 1 minute into the video.
   • Example: gallery.args.html_overlay_show = 'before_first';

5. html_overlay_fields:

   • Specifies the format of the form fields. Set it to 'json' for structured input.
   • Example: gallery.args.html_overlay_fields = 'json';

6. html_overlay_formFields:

   • This argument is a JSON string that defines the fields of the form. The JSON structure includes:
     • name: The field's unique identifier (e.g., "email").
     • label: The label text for the field (e.g., "Email Address").
     • type: The type of input (e.g., "string" for text input).
     • required: Indicates whether the field is mandatory.
     • placeholder: Placeholder text for the input field.
     • fieldType: Defines the input type (e.g., "text", "submit").

Key Notes

1. Form Customization: You can modify the form's fields and layout to suit your needs by editing the formJsonObj variable.
2. Timing Options: Use html_overlay_show to strategically display the form based on user interaction or video progress. For example:
   • before_first: Show the form before video playback starts.
   • on_at_00:01:00: Display the form at 1 minute into the video.
3. Engage Viewers: This feature lets you collect valuable information without disrupting the viewer's experience.
4. Field Validation: Ensure required fields are properly configured to avoid incomplete submissions.

For further assistance, feel free to check out our Cincopa Help Center.