Skip to main content

Landing Page Integration

You can integrate any your landing page or lead forms with Chakra through the Landing Page Form plugin.

Follow the steps below to enable this integration

Create a new "Landing Page Form" plugin​

  • Go to plugins list Admin > Plugins
  • Click Add Plugin button
  • A new page opens up showing available plugins
  • Find the card titled "Landing Page Form" and click it
  • A modal opens up prompting you to enter the name for this plugin
  • Enter a relevant name like Landing Page Leads
  • Click Add button to create this new plugin
  • You will be redirected the configuration page

Webhook details​

  • On the configuration page of the plugin, the first thing you will find is the webhook url that you need to use in your landing page
  • You can use this webhook urlas the POST endpoint for your form or you can call this api using fetch or ajax request from your JS code. Remeber to pass a json payload of key value pairs containing the relvant information. Eg payload:
{
   "name": "John",
   "phone_number": "+911122332211",
   "email_address": "john@example.com",
   "enquiry": "Can i get a quotation for my request"
}

Eg: using a fetch request

fetch("<webhook_url>", {
 method: "POST",
 body: JSON.stringify({ "name": "John" })
})

Configure lead creation​

  • On the configuration page, locate Chakra Configuration section
  • select Lead from the procedure input
  • A new mapping section should show up. This will allow us to map the incoming events to a lead
  • Click the Add Another button to add a new mapping
  • On the left column you need to enter the key of the JSON payload from your API request
  • On the right column you need to select the corresponding lead attribute
  • Please note that you can configure multiple forms, pages to a single plugin
  • So list all the known matching payloads using this mapping configuration
  • Finally, there might be a situation where your landing apge sends certain data taht is not mapped here. To catch all that information you can configure a catch all attribute to capture all unmapped data. Choose the same attribute from Combine all remaining Form fields into this Procedure attribute

Save & activate​

  • After making all necessary changes - click the Save button on the top right corner to save all configs.
  • Then activate the plugin by clicking the 'Active/Inactive' toggle from the top

Logs​

You can debug the integration by looking at logs of the plugin. to access logs, click "Show Logs" button from the top of the pluign page. This interface will show all events received by this plugin and its resulting lead creation