How To Create Email Marketing Widget For Your Website

Already Know How To Do It?

Download File To Begin

Optional Parameters

  • HideCap - When this is set to TRUE it hides reCapacha otherwise that's on by default.
  • ShowTitle - When this is set to TRUE it will show the title otherwise it hides by default.

UPDATED -  2/10/2019 to remove sandbox parmeters and increase height to 500px for recapcha. 


Ready To Learn How To Do This 

You can add an email subscription widget to your website, when you do emails will automatically get funneled into email marketing.   To create a widget you need to choose one of these two themes.  

Option 1 - "Default" Theme 

Option 2 - "HD" Theme 



Step 1 - Create The Subscription Form In Email Marketing 

Once you have determined what kind of theme you're going to need you'll also need to gather a few more bits of information.  To gather this information the first step you have to do is create an actual subscription form using email marketing.  You can do this by loading email marketing and choose "forms" in the upper right corner.  From there you can choose "create form" to build a basic subscription form.

DO NOT ENABLE CAPATCHA OR CREATE ADDITIONAL FIELDS BESIDES "FIRST NAME" , "LAST NAME". 



Step 2 - Get The "Form ID" From The URL Of The Form

After you created a form you'll need to get the "ID" of the form, this is done by loading up the form in email marketing can.




Step 3 - Get The First Name ID 

Click the "GetHTML" button copy and paste the HTML the and put in notepad.exe  (not word).   Then search for the keyword  "FIRST NAME" you'll get a line that looks like this below.  Look for the 'input" line after it, you're looking for the "customFields box and you're looking to get the NUMBER inside those brackets. That's the First Name ID you'll need.




Step 4 - Get The Last Name ID 

Do exactly the same thing but this search for "LAST NAME" and get that ID because you'll need that number next.

 



Step 5 - Get The Domain Name 

In many cases this will be "emarketing" in some rare cases it will be "eblast", you can get this from the URL stream when you click "view" form.



Step 6 - Confirm You Have All The Info Needed To Build The Subscription

At this point you should have the following information: 

  • Theme  (typically this is "hd" or "default" depending on the style you want) 
  • FormID   (this is a NUMBER) 
  • FirstNameID   (this is a NUMBER)
  • LastNameID     (this is a NUMBER)
  • Domain      (typically this is "emarketing")


Step 7 - Download The Example iFrame Code Because We're Going To Modify It

Let's start with downloading a a text file example, so all you have to do is swap out the values in the URL, save the text file and send it to the website provider.  



Step 8 - Modify The HTML iFrame Parameters Found In The "src=" Line

You're going to look for the line in the text file that looks like this..

src="//leads.morethanrewards.com/eNewsletters/?domain=emarketing&theme=hd&formid=11&firstnameid=22&lastnameid=25"

We want to modify these values

src="//leads.morethanrewards.com/eNewsletters/?domain=emarketing&theme=hd&formid=11&firstnameid=22&lastnameid=25"

Simply change the domain to either "emarketing" or "eblast", change the theme line to either "hd" or "default", then update each of the other values including the FormID, FirstNameID, and Last NameID.    Once you're done Save that text file as that is the file you're going to send the website provider.  Once they paste it in the HTML on their site it will render out the subscription form and look nice. 

Here's The HTML Code For The Completed iFrame That Is On The Zip File Above

<iframe border="0" height="300" sandbox="allow-forms allow-scripts allow-popups allow-modals" src="//leads.morethanrewards.com/eNewsletters/?domain=emarketing&theme=hd&formid=11&firstnameid=22&lastnameid=25" style="border-width:0px;overflow:hidden" width="100%" scrolling="no"></iframe>



Step 9 - That's It - Your Ready To Send It 

If you want to spot check the file you can do the following steps, otherwise you're ready to send it to the website provider.


Do A Spot Check Before Sending It

  • Open up Notepad.exe 
  • Type "hello this is a test" 
  • File , Save As...  save it to your desktop and call it..  "test.htm"   (don't forget to put .htm) 
  • Leave notepad open, and double click the file on your deskop, it should open up chrome and say "hellow this is a test" in chrome.  Good job you just created an HTML file that is being read in chrome. 
  • Now go to the HTML text file your are going to send the website provider and copy the iframe line your file should look like this.   Don't forget because your testing it locally on your PC you need to "https" before the // otherwise it won't load locally.  Normally you don't need this but since your testing it on your PC you have to add, DO NOT send it like that to the website provider, instead leave it as "//leads.morethanrewards..."  without the https. 

hello this is a test
<iframe border="0" height="300" sandbox="allow-forms allow-scripts allow-popups allow-modals" src="https://leads.morethanrewards.com/eNewsletters/?domain=emarketing&theme=hd&formid=11&firstnameid=22&lastnameid=25" style="border-width:0px" width="920"></iframe>

  • Ok now, save it  (remember we're editing the test.htm file) and you just saved it. 
  • Now double click the test.htm again or refresh the page and it should look like this