Maildrip Integration

Site | Docs | Twitter

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>

UPDATE:, you can redirect your subscribers to a specific url/website if you provide the optional data in your for tag i.e (data-maildrip-redirect-url) so your form will look like the example below 

<form
	id="maildrip-contact-form"
	data-maildrip-apikey="12XXXXa-XXXb-XXX-XXcX-4XXXXXXX34"
	data-maildrip-redirect-url="https://google.com"
	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>

UPDATE:, you can now add additional form inputs to get more information from your subscribers. To do this simply add the desired additional input fields with a class of “maildrip-newsub-{field name goes here} i.e (class=”maildrip-newsub-phone-number”), so your form will look like the example below 

<form id="maildrip-contact-form" data-maildrip-redirect-url="https://google.com">
	<input type="text" class="maildrip-newsub-name" placeholder="Your Name" />
	<input type="email" class="maildrip-newsub-email" placeholder="Your Email" />
	<input type="text" class="maildrip-newsub-phone-number" placeholder="Your Phone Number" />
	<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>

UPDATE:, you can redirect your subscribers to a specific url/website if you provide the optional data in your for tag i.e (data-maildrip-redirect-url) so your form will look like the example below 

<form id="maildrip-contact-form" data-maildrip-redirect-url="https://google.com">
	<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>

UPDATE:, you can now add additional form inputs to get more information from your subscribers. To do this simply add the desired additional input fields with a class of “maildrip-newsub-{field name goes here} i.e (class=”maildrip-newsub-phone-number”), so your form will look like the example below 

<form id="maildrip-contact-form" data-maildrip-redirect-url="https://google.com">
	<input type="text" class="maildrip-newsub-name" placeholder="Your Name" />
	<input type="email" class="maildrip-newsub-email" placeholder="Your Email" />
	<input type="text" class="maildrip-newsub-phone-number" placeholder="Your Phone Number" />
	<button type="submit">Submit</button>
</form>

Browser Support

Chrome Firefox Safari Opera Edge IE
Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ 11 ✔