Integrating “Forminator pro” forms with aNinja using Javascript code

Integrating “Forminator pro” forms with aNinja allows you to push leads data to aNinja with every form submission.

In this article we’re using a Javascript code for the integration.

Integrating Forminator pro with aNinja

To add a custom JavaScript field to your Forminator pro form, follow these steps:

  • Log in to your WordPress site
  • And navigate to the Forminator Pro plugin.
  • In the Forminator Pro dashboard, select the form that you want to integrate with aNinja.
  • Then, in the form builder, click on the “Custom HTML/JS” field to add it to your form.
  • Once the field is added, click on the “Edit HTML” button to open the HTML editor.
  • And add your JavaScript code in the editor.

Here’s an example – you want to map the form fields to aNinja fileds (see fields mapping section below)

<script>

$ = jQuery;

$(document).ready(function() {

$(‘body’).on(‘submit’, ‘#forminator-module-5704‘, function (e) {

       var contact_name = $(“input[name=’name-1′]”).val();

       var contact_email1 = $(“input[name=’email-1′]”).val();

       var contact_phone1 = $(“input[name=’phone-1′]”).val();

       var time_to_contact = $(“select[name=’select-1′]”).val();

       var method_to_contact = $(“select[name=’select-2′]”).val();

       var comments = $(“input[name=’textarea-1′], textarea”).val();

       $.ajax({

            type: ‘post’,

            url: “https://aninja.com/api/v1/contactform/?apikey=YOURAPIKEY“,

            data: {

                ‘contact_name’: contact_name,

                ‘contact_phone1’: contact_phone1,

                ‘contact_email1’: contact_email1,

                ‘custom_comments’: comments,

                ‘custom_best_method_to_contact’: method_to_contact,

                ‘custom_best_time_to_contact’: time_to_contact,

            },

            success: function (data) {

                //alert(‘success’);

                console.log(‘Lead succesfully injected to aninja’);

            }

        });

});

});

</script>

  • Lastly, click “Save” to save your changes.

Fields mapping

Map the data on the aNinja fields and Form fields.

These are the default aNinja fields:

For the Custom Fields, just prefix the field name with “Custom.” e.g. Custom.Source

Where does the data appear

After the integration, you can search your aNinja CRM for the imported leads. You can also search for any custom field, opportunities, and any other info that was pushed from the form.

  • Lead’s contacts appear in the leads contact section in the lead view
  • Opportunities also appear in the opportunity section in the lead view
  • The company’s info appears on the top left of the lead view, in the Company section.
  • Custom fields appear in the custom field section of the lead view
  • Lead Search is a field that also appears in the bottom left of the lead view. Specifically, these are info/links on the lead or the organization found in Google search.

WPForms integration with aNinja

With WPForms integration, you can push forms responses to your aNinja account using webhooks, as soon as someone submits a new form on your website.

Webhooks allows you to automatically send information from your form to aNinja.

WPForms integration with aNinja

To configure webhook integration settings within the WPForms plugin, follow these steps:

Installing the Webhooks Addon
Setting Up a Webhook
  • Create a new form or edit an existing form in the WPForms form builder.
  • Click on the “Settings” tab at the top of the form builder.
  • Under Webhooks, toggle the Enable webhooks option on.

Enabling webhooks for a form

  • Click on the pencil to give a name to your webhook
  • Then fill out the settings for this connection:
  • Under “Request URL”, enter the below aNinja webhook URL:

https://aninja.com/api/v1/contactform/?apikey=YOUR_API_KEY 

  • Under “RequestMethod” enter “POST”

The webhooks settings in the form builder

  • Under “Request Body” define the keys and values that will be sent in the body of your webhook’s request.:

    • aNinja fields in the parameter box

    • Form fields from the dropdown.

Check the fields mapping section below to map to the correct aNinja fields.

  • Once you have added all the fields you want to include, click “Save” at the bottom of the “Webhooks” panel to save your changes.
  • Go ahead and test the form on your website. The submissions will be pushed to your aNinja account with the lead data captured in the form.

Fields mapping

Map the data on the aNinja fields and Form fields.

These are the default aNinja fields:

For the Custom Fields, just prefix the field name with “Custom.

Where does the data appear

After the integration, you can search your aNinja CRM for the imported leads. You can also search for any custom field, opportunities, and any other info that you have imported.

  • Lead’s contacts appear in the leads contact section in the lead view
  • Opportunities also appear in the opportunity section in the lead view
  • The company’s info appears on the top left of the lead view, in the Company section.
  • Custom fields appear in the custom field section of the lead view
  • Lead Search is a field that also appears in the bottom left of the lead view. Specifically, these are info/links on the lead or the organization found in Google search.

Google Forms aNinja Webhook integration

With Google Forms Webhook integration, you can push forms responses to your aNinja account as soon as someone submits a new Google Form.

The newest version of Email Notifications add-on supports webhooks and in addition to making HTTP requests to the webhook callback URL.

The add-on can also include the user’s response and the form data in the payload body of the HTTP request.

Webhooks for Google Forms

Enabling Webhooks in Google Forms

  1. To get started, install the Google Forms add-on from the Google marketplace.
    1. The add-on is titled ‘Email Notifications’ but it also includes support for sending instant push notifications to any webhook URL.
  2. Next, launch the add-on and choose Webhooks for Google Forms from the menu.
  3. Lastly, click the Create Webhook button to integrate a new webhook with your Google Forms.
    1. You can have multiple webhooks associated with the same Google Form and it would send the forms data to all webhook URLs when a new form submission is received.
1- Install Google Forms add-on

Email Notifications for Google Forms add-on is available for both Gmail and Google Workspace accounts.

  • To install the Google Forms add-on, open Google Marketplace
  • And click the blue Install button to add the app in your Google Account.

Install Google Forms add-on

 

  • On the next screen that says “Email Notifications needs your permission in order to start installing”, click the Continue button.
  • Choose the account under which you wish to install and authorize the Forms add-on.
  • The add-on will now request permissions to access your Google account.
    • Click the Allow button to grant the necessary access and launch the add-on.

Google Forms permissions

2- Launch the Email Notifications Add-on for Google Forms

After you have installed the Google Forms add-on, it can be accessed and launched from any Google Form that is associated with your Google account.

  • Go to forms.google.com 
  • And open any existing Google Form in your Drive.
  • Or you can type forms.new in your browser’s address bar to create a new form where you wish to use the email add-on.
  • Inside the Form editor, click the Add-ons icon that resembles a puzzle piece as shown in the screenshot.

Launch Google Forms add-on

 

  • Next, choose Email Notifications for Google Forms from the list of available add-ons.
    • If you are running the add-on for the first time inside a Google Form, you may also have to choose Enable Notifications to activate the add-on form for that Google Form.
3- Create Webhook for Google Forms
  • Inside the Email Notifications for Google Forms choose Webhook for Google Forms

 

  • Then click on Create webhook

Add the Webhook URL and Query Parameters
  • On the first screen, provide a unique name for your webhook (used internally) and choose an HTTP Request method.
  • You are more likely to do a POST request but the webhook module also supports GET, PUT, PATCH and DELETE methods.
  • Here, you need to get your aNinja API key 
  • Next, provide the below webhook URL to integrate aNinja with Google Forms:

https://leads.aninja.com/handlers/googleforms/index.php

  • For testing purposes, we recommend using either the webhook.site or requestbin.com service to get a unique URL for inspecting and testing your webhooks.

Webhook Form Url

 

  • The Query Parameter section lets you append custom parameters to the webhook URL.
  • For instance, if you are sending webhook from multiple forms, you can append the {{Form Id}} parameter to your URL to easily distinguish the source of a particular webhook call.
  • You may use any dyanmic field for query parameters:
    • Dynamic fields are always enclosed in double curly braces – like {{Your first name}} – and are automatically replaced with the actual answers that the user submits in the form.
Authorization and Authentication

You can configure your webhook to include a secret bearer token or access token to authorize the calls.

You can do basic authentication with login and password or include the API keys with the authentication headers.

Custom Headers

You may also include custom headers in your webhook endpoint(s).

The keys of the header can be either strings or numbers and may not include spaces or other invalid characters.

Request Body

The request body defines the payload (form response and custom data) that is sent to the web service when a form entry is received.

You may send payload in different formats including JSON, Form data, XML and more.

webhook request body

 

  • The payload may have form meta data (like the form ID, response Id, response Edit URL) and user’s answers.
    • Each question should be added as a new key, value pair in the request body with the answer title enclosed in double curly braces.
  • Map the form fields to aNinja fields:

  • After you are done defining your webhook, click the Test button and the add-on will send make an HTTP request to the callback URL using form data from the most recently received response of your Google Form.
  • Click Save to enable the webhook.

Manage Webhooks

The webhook manager lists all the webhooks that are enabled for your current Google Form.

You can click:

  • The Edit icon to change a specific webhook,
  • The Duplicate button will help you create a copy of the current webhook
  • And the Delete option removes the webhook from your form.

Google Form Webhooks

imatrix aNinja Form Integration

aNinja allows you to integrate your imatrix Website Forms into your aNinja account. In this article, we show you how the imatrix aNinja Form Integration can be done using a simple Javascript code.

imatrix aNinja Form Integration

You can integrate and augment the functionality of popular platforms with aNinja.

  • First, you need to find your API key
    • On the left sidebar, click on Settings > Users
    • Then, click the edit pen next to your name.
    • And, copy it to use it later in the integration
  • Now, login to your imatrix website editor
  • On the left side menu, click on Website Editor
  • Then, click on Edit Website in the middle of the page.
  • Type your email and password to login
  • On the left side menu, click on Pages 

  • Next to the form, on the right side, click on the little Settings gear
  • Scroll down to the Custom Info section
  • And insert your Javascript code under “Specify Custom Header”

imatrix aNinja Form Integration

  • Map the form fields to aNinja fields
  • Save and Publish
  • Go to your website, refresh and test submitting a form.
  • Then, check your aNinja account for the new lead automatically generated after the form submission.
You can use the below Javascript code

Where does the imported data appear

After the integration, you can search your aNinja CRM for the imported leads. You can also search for any custom field, opportunities, and any other info that you have imported.

  • Lead contacts appear in the leads contact section in the lead view
  • Opportunities also appear in the opportunity section in the lead view
  • The company’s info appears on the top left of the lead view, in the Company section.
  • Custom fields appear in the custom field section of the lead view.
  • Lead Search is a field that also appears in the bottom left of the lead view. Specifically, these are info/links on the lead or the organization found in Google search.

Need help with imatrix aNinja Form Integration? Leave us an email at support@aninja.com. And we will happily assist you.

VistaPrint aNinja Form Integration

aNinja allows you to integrate your Vistaprint Website Forms into your aNinja account. In this article, we show you how the Vistaprint Form Integration can be done using a simple Javascript code.

Vistaprint aNinja Form Integration

You can integrate and augment the functionality of popular platforms with aNinja.

  • First, you need to find your API key
    • On the left sidebar, click on Settings > Users
    • Then, click the edit pen next to your name.
    • And, copy it to use it later in the integration
  • Now, login to your Vistaprint website editor
  • In the middle of the page, click on edit website
  • On the left side menu, click on General Settings > General
  • Then, choose Tools & Analytics
  • Under Other Tags add the Javascript code (see example below)Javascript aNinja Form Integration
  • Map the form fields to aNinja fields
  • Save and Publish
  • Go to your website, refresh and test submitting a form.
  • Then, check your aNinja account for the new lead automatically generated after the form submission.
You can use the below Javascript code

Where does the imported data appear?

After the integration, you can search your aNinja CRM for the imported leads. You can also search for any custom field, opportunities, and any other info that you have imported.

  • Lead’s contacts appear in the leads contact section in the lead view
  • Opportunities also appear in the opportunity section in the lead view
  • The company’s info appears on the top left of the lead view, in the Company section.
  • Custom fields appear in the custom field section of the lead view.
  • Lead Search is a field that also appears in the bottom left of the lead view. Specifically, these are info/links on the lead or the organization found in Google search.

Need help with Vistaprint aNinja Form Integration? Leave us an email at support@aninja.com. And we will happily assist you.

Eventbrite Webhooks aNinja Integration

In this article, we’re going to show you how the Eventbrite aNinja Integration can be done through Webhooks.

Using Webhooks

A webhook (also called a web callback or HTTP push) is a way for the Eventbrite API to provide aNinja with information. Webhooks delivers information to your aNinja account in real-time, meaning you get an immediate notification.

Currently, the webhooks provided by Eventbrite track six objects: Event, Order, Attendee, Organizer, Ticket Class and Venue. You should use these webhooks to ensure that aNinja remains compliant and compatible with Eventbrite. Make sure to follow the Eventbrite Engineering Blog to receive updates about our webhook implementation.

To implement webhooks, you need to:

  1. Make sure you have the necessary prerequisites.
  2. Create a webhook.
  3. Test the webhook.
Webhooks for the Event object

The following Event actions have webhooks:

  • Publish
  • Unpublish
  • Create
  • Update
Webhooks for the Order Object

The following Order actions have webhooks:

  • Place
  • Update
  • Refund
Webhooks for the Attendee Object

The following Attendee actions have webhooks:

  • Update
  • Check_in
  • Check_out
Webhooks for the Organizer Object

The following Organizer actions have webhooks:

  • Update
Webhooks for the Ticket Class Object

The following Ticket Class actions have webhooks:

  • Create
  • Delete
  • Update
Webhooks for the Venue Object

The following Venue actions have webhooks:

  • Update

The Composition of Webhooks

Webhooks are constructed as an HTTP request with the following composition:

  • Sent via the POST method
  • Application/JSON mime type defined in the headers
  • Valid JSON payload (i.e. the part of transmitted data that is the actual intended message).
Attribute Description
api_url Object whose creation or update triggered the webhook
config.endpoint_url Target URL specified when the webhook was created.

Example webhook JSON payload:

{
    "api_url": "https://www.eventbriteapi.com/v3/orders/1234567890/",
    "config": {
        "endpoint_url": "https://myawesomeapp.com/webhook"
    }
}

1- Prerequisites to Using Webhooks

In order to use webhooks, you need the following:

  • At least one Event.
  • An Eventbrite API User Key.
  • A registered integrated application (e.g. aNinja)
  • A public, online website that can receive webhooks. This can be built in Django, Flask, Rails, Node.js, PHP or any tool for the creation of web pages.

2- Creating a Webhook

To create a webhook:

  1. Go to the Webhooks Add
  2. Choose an Event.
  3. Enter the URL http://httpbin.org/post, then select the object for which you want to create a webhook.
  4. Click Add Webhook.

After that, you are directed to the newly created webhook detail page.

Testing a Webhook

You should test that your webhook is correctly implemented. To do so:

  1. On the webhook detail page, click Test. As a result, a test delivery request is generated.

The small, green ‘200 OK’ button corresponds to the HTTP status definition for a standard successful HTTP request. So, any webhook delivery request that returns a number beginning with 2 (two) is considered a success.

  1. Click ‘200 OK’. It expands, displaying the following information:

The Request Headers and Request Payload are what the Eventbrite webhooks system sent to the endpoint URL (i.e. aNinja). The Request Payload is valid JSON, which you can parse and use.

Conversely, the Response Headers and Response Body comprise the data sent back by the your receiving app. The delivery response is stored for 15 days.

Where does the imported data appear?

After the integration, you can search your aNinja CRM for the imported leads. You can also search for any custom field, opportunities, and any other info that are collected from the forms.

  • Lead’s contact appears in the leads contact section in the lead view
  • Opportunities also appear in the opportunity section in the lead view
  • The company’s info appears on the top left of the lead view, in the Company section.
  • Custom fields appear in the custom field section of the lead view
  • Lead Search is a field that also appears in the bottom left of the lead view. Specifically, these are info/links on the lead or the organization found in Google search.

Standalone / Curl Applications Integration

With Standalone / Curl Applications Integration you can forward leads into your aNinja account simply using a programming code or an API. In this article, we show you how the Standalone / Curl Applications Integration can be done.

Standalone / Curl Applications

The following example is in PHP, but can be repurposed to your language of choice (Python, Ruby, Java, etc..)

Sample PHP API push

/**
* Basic snippet for posting with command line curl
*/
$apikey = '123456';

function doCurl($apikey = null, $data = []) {
$data = http_build_query($data);

$api_base = 'https://aninja.com/api/v1';

$api_endpoint= '/contactform/?apikey='.$apikey.'';

$cmd = 'curl -sL --data ''.$data.'' "'.$api_base.'/'.$api_endpoint.'"';

Fields mapping Table

The following are standard fields you can map to, in addition to any custom fields created in your application that you can see under Settings > Custom fields.

Where does the imported data appear

After the integration, you can search your aNinja CRM for the imported leads. You can also search for any custom field, opportunities, and any other info that you have imported.

  • Lead’s contacts appear in the leads contact section in the lead view
  • Opportunities also appear in the opportunity section in the lead view
  • The company’s info appears on the top left of the lead view, in the Company section.
  • Custom fields appear in the custom field section of the lead view
  • Lead Search is a field that also appears in the bottom left of the lead view. Specifically, these are info/links on the lead or the organization found in Google search.

Need help with teh Integration? Leave us an email at support@aninja.com. And we will happily assist you.

Webflow Integration using Zapier

Webflow integration can be done either through Zapier or through webhook. In this article, we’re going to show you the Webflow integration using Zapier.

Find your aNinja embed code before you get started. It is the form integration endpoint from aNinja. This is different for each form.

Sending Webflow form submissions to aNinja through Zapier

  • Log in to your Zapier account
  • Click on Make a Zap
  • ‍Choose Webflow as your Trigger App event
  • Connect the Webflow account. Make sure you are logged in to Webflow on the same browser.
  • Select Form Submission as Webflow trigger
  • Choose your Webflow Account
  • Set up Webflow Form Submission by selecting the site you want to receive notifications from and the Form Name
  • Test Trigger
  • For Action, choose Webhook.
  • For Event, select POST
  • Set up action
  • URL: Copy here the aNinja Form Embed code.Webflow Integration using Zapier
  • Payload Type: form

Mapping Fields

Map the Data on the aNinja fields and Form fields

These are the default aNinja fields:

Testing the Integration

  • Click Fetch & Continue to test the Webflow connection. Make sure you have at least one recent form submission created or submit a new form submission on your website before testing the connection. If there’s an issue with the connection troubleshoot your Webflow connection with Zapier (see below).
  • Check aNinja if the test lead got through.
  • Rename the Zap.
  • Publish Zap

Where does the imported data appear

After the integration, you can search your aNinja CRM for the imported leads. You can also search for any custom field and any other info that is collected from the forms. All the data appear in the Lead View.

  • Lead’s contact (Name, address, email, phone, and email) appears in the leads contact section in the lead view
  • The company’s info appears on the top left of the lead view, in the Company section.
  • Custom fields appear in the custom field section of the lead view
  • Lead Search is a field that also appears in the bottom left of the lead view. Specifically, these are info/links on the lead or the organization found in Google search.

Need help with the Webflow Integration using Zapier? Leave us an email at support@aninja.com. We’re more than happy to assist you.

Wix aNinja Webhook integration

aNinja allows you to integrate your Wix Website into your aNinja account.

In this article, we show you how the Wix aNinja integration can be easily done.

Wix Integration

You can integrate and augment the functionality of popular platforms with aNinja.

  • First, you need to find your API key
    • On the left sidebar, click on Settings > Users
    • Then, click the edit pen next to your name.
    • And, copy it to use it later in the integration

Enabling Wix Form Webhooks

To get your Wix forms to push the form submission information into aNinja, you can use webhooks in Wix.

  • First, on your Wix site, start by enabling Velo Dev Mode:
    • This is as simple as going to your site (Edit site), and in the top bar where Dev Mode is indicated, turning on Dev Mode.
  • Next, you can go back to your Wix dashboard, and under Automations, click to add a new Automation.
  • Then, choose a Trigger event (for example on all form submissions).
  • Now, choose the webhook option.
  • And, configure the webhook to point to the aNinja webhook handler for Wix:
    • https://leads.aninja.com/handlers/wix/redirect.php
  • Then, choose “Customize structure” to map the form fields to the aNinja fields.

These are the default aNinja fields:

  • Lastly, hit Save and test it out with a form on your Wix site.

Need help in your Wix aNinja integration? Leave us an email at support@aninja.com. We will happily assist you!

Integrating Hubspot forms with aNinja

In this article, we show you how integrating the Hubspot forms with aNinja can be done in 2 steps.

The integration allows you to forward leads into your aNinja account simply using a programming code or an API. Which allows you to augment the number of your leads.

1- In Hubspot Marketing Hub, Edit your page, then, go to page Settings > Advanced Options.

2- In Footer HTML add the following Javascript (here, you will need to adapt the code to your form and use your aNinja API key).

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script>

$(document).on(‘submit’,’form’,function(){
var contact_name = $(“input[name=’firstname’]”).val() +” “+$(“input[name=’lastname’]”).val();
var contact_email1 = $( “input[name=’email’]”).val();
var contact_phone1 = $( “input[name=’phone’]”).val();

    $.ajax({
        type: 'POST',
        url: "https://aninja.com/api/v1/contactform/?apikey=YOUR_ANINJA_API_KEY_HERE",
        data: {
            'contact_name': contact_name,
            'contact_email1': contact_email1,
            'contact_phone1': contact_phone1,
            'your-comments': 'From my Hubspot form'
        },
        success: function (data) {
            console.log('[Info] aNinja form submitted successfully');
        }
    });
});

</script>

  • Also, check if your Hubspot plan offers Workflows. If so, you can post the Form submission to aNinja through a Workflow webhook in Hubspot.

Where does the imported data appear

After the integration, you can search your aNinja CRM for the imported leads. You can also search for any custom field, opportunities, and any other info that is collected from the forms.

  • Lead’s contact appears in the leads contact section in the lead view
  • Opportunities also appear in the opportunity section in the lead view
  • The company’s info appears on the top left of the lead view, in the Company section.
  • Custom fields appear in the custom field section of the lead view
  • Lead Search is a field that also appears in the bottom left of the lead view. Specifically, these are info/links on the lead or the organization found in Google search.

Need help integrating Hubspot forms with aNinja? Leave us an email at support@aninja.com. We’re more than happy to assist you.