MailDrip Logo

Integrations and
Documentations .

MailDrip Integration.

The Maildrip library exported as a Node.js module in two ways i.e Maildrip-Html or Maildrip-Node.

Usage

Installing & using Maildrip-Html on your Html page(s) could be done easily by following the steps below

Step 1: Installation

				
					Add the below script tag in the <head> </head> section of your page


				
			

Using Maildrip CDN:

				
					  <script src="https://integrations.maildrip.io/maildrip_html.min.js" type="module"></script>

				
			

Step 2: Initializing

Initializing the Maildrip-Html on your Html page(s) could be don in two different ways which are Step-2.1 or Step-2.2:

Step 2.1: Common usage

				
					In your form tag, you need to make sure it contains an id of “maildrip-contact-form”
<form id="maildrip-contact-form"> ... </form>


				
			

The form tag must also contain 3 specific attributes which are (data-maildrip-apikey, data-maildrip-accesssecret, data-maildrip-campaignid) the value for these attributes could be found in your API settings on maildrip.io . So, your form tag would look like the example below:

				
					<form id="maildrip-contact-form" data-maildrip-apikey="YOUR-GENERATED-APIKEY-ON-MAILDRIP" data-maildrip-accesssecret="YOUR-GENERATED-ACCESS-SECRET" data-maildrip-campaignid="YOUR-GENERATED-CAMPAIGNID-ON-MAILDRIP">...</form>
				
			

Inside your form tag, you’ll need a submit button and two input fields one of which is type text to for your subscriber(s) to inupt his/her name with a class name of “maildrip-newsub-name” and the other input field of type email for your subscriber(s) to input his/her email with a class name of “maildrip-newsub-name” ad your code will look like the example below:

				
					<input type="text" class="maildrip-newsub-name" placeholder="Your Name">
<input type="email" class="maildrip-newsub-email" placeholder="Your Email">
<button type="submit">Submit</button>
				
			

Finally, combining your Form tag and input fields will result in the example below which you can copy and paste into your editor but edit the following attributes (data-maildrip-apikey, data-maildrip-accesssecret, data-maildrip-campaignid) so that we can identify you and the campaign you want your users to signup to.

				
					<form id="maildrip-contact-form" data-maildrip-apikey="12XXXXa-XXXb-XXX-XXcX-4XXXXXXX34"  data-maildrip-accesssecret="5XXXxxxXXXxxxXccxxxxKeZ4yyxxxxXXXXA=" data-maildrip-campaignid="55xxXXaec6cxxXXXXf2xxXX44">
  <input type="text" class="maildrip-newsub-name" placeholder="Your Name">
  <input type="email" class="maildrip-newsub-email" placeholder="Your Email">
  <button type="submit">Submit</button>
</form>

				
			
Step 2.2

In this second example, the first thing you would do is add the below script tag which could be an inline script in your html page below the Insatllation script tag or an external script file linked to the html page you are using it for
Note: the value for {apiKey, accessSecret, campaignId} could be found in your API settings on maildrip.io and must be filled correctly so that we can identify you and the campaign you want your users to signup to.

				
					<script type="module">
  new MailDripContactCampaign({
      apiKey: "12XXXXa-XXXb-XXX-XXcX-4XXXXXXX34",
      accessSecret: "5XXXxxxXXXxxxXccxxxxKeZ4yyxxxxXXXXA=",
      campaignId: "55xxXXaec6cxxXXXXf2xxXX44"
    });
</script>
				
			

then, create a form tag in the body of your page containing an id of “maildrip-contact-form”

				
					<form id="maildrip-contact-form"> ... </form>
				
			

Inside your form tag, you’ll need a submit button and two input fields one of which is type text to for your subscriber(s) to inupt his/her name with a class name of “maildrip-newsub-name” and the other input field of type email for your subscriber(s) to input his/her email with a class name of “maildrip-newsub-name” ad your code will look like the example below:

				
					<input type="text" class="maildrip-newsub-name" placeholder="Your Name">
<input type="email" class="maildrip-newsub-email" placeholder="Your Email">
<button type="submit">Submit</button>


				
			

Finally, combining your Form tag and input fields will result in the example below which you can copy and paste into your editor.

				
					<form id="maildrip-contact-form">
  <input type="text" class="maildrip-newsub-name" placeholder="Your Name">
  <input type="email" class="maildrip-newsub-email" placeholder="Your Email">
  <button type="submit">Submit</button>
</form>
				
			

Browser Support