Custom HTML Emails in zkipster

Learn how to set up a custom email where you provide the full HTML design

Olivia Robinson avatar
Written by Olivia Robinson
Updated over a week ago

Please Note: Creating and sending custom HTML emails requires a technical understanding of HTML code so if you are unsure, please involve your technical staff or design team.

zkipster does not support the building of custom HTML code in any way. If you lack the skills to fully understand HTML, and don’t have anyone within the team with that knowledge, zkipster strongly encourages the use one of the predefined templates.


Tips when Preparing your HTML Code

  • Any image assets that are embedded in the code should point to public domain URLs.

  • Any relative local links to files in your hard-drive will show as broken when uploaded. If this happens, it's still possible to replace the image by uploading them in zkipster after you have uploaded the HTML file. zkipster then adds a public reference to the email code (See the "Replacing Broken Pictures" section below).

  • To capture RSVPs, you should create a standalone Response Form and embed the link into the HTML code after it is uploaded. Design a placeholder for the form into the code to be replaced with the live link (See the "Linking Response Forms to your Email" section below).

  • Any image you will upload needs to be under 3200x3200 in dimension to avoid errors.

Please note: The file size upload limit for your custom HTML invitations is 1MB.


Setting up the Custom HTML Email

When you have your HTML code file written or sent from your design team, it is very easy to upload into zkipster:

1. Create a new campaign and select HTML Email Format. When setting up the campaign, ensure that you have "Do you want to collect responses?" set to NO. You will be linking the registration form in the HTML code after importing it into zkipster.

2. Upload the HTML custom code file



3. Edit your 'Email Setup' as needed

Adding Dynamic Tags from Guest List Data to your Email

When preparing the HTML code, it is possible to link dynamic tags from zkipster into your code to personalise the email using the data from your guest list. You need to know where in the code to place these tags once the file is uploaded so be sure to add placeholders for dynamic content that will get replaced by the actual guest values when the email is sent.

For example, you can address the guest by their name:
​ 
Dear :guest_firstname :guest_lastname
​ 
:guest_firstname and :guest_lastname will be replaced by the real guest names when they actually receive the email.
​ 
These are the tags currently available for use within emails:

EVENT TAGS

GUEST TAGS

*Custom fields will also be available as tags with :guest_<name_of_your_custom_field>

Replacing Broken or Missing Images in your Email

After successfully uploading an HTML file the zkipster system provides a preview of the email content.
​ 
If some images are missing or broken, this is commonly due to a local file reference being used from your hard-drive or a non-public link was used to reference the image.

In this case, it's possible to replace the image by uploading it to zkipster which will publicly host the image once the steps below are done:

  1. Click on the image to be replaced

  2. Select the image from files

  3. Or place the URL where the image is hosted

  4. Click Save

Linking Registration Forms to your Email

To attach a zkipster form to a custom code HTML email, you need to create a response form separately (depending on your requirements, you can also use the consent form for this):


​This article additionally explains how you are able to customize the design of your form further.

Once you are ready with your form, you can link it into the code after the HTML code has been uploaded. This will provide the guest with a clickable link to RSVP for the event into zkipster:

For example:

<a href=”:form_1”>Please RSVP here!</a>
​ 
The ":form_1" tag above will be replaced by the real Response Form link that you select (see choosing forms section below). If you need to link more than one Form in an email, keep using :form_1, :form_2, etc. It will then be possible to pick which form each of these links to.

  1. Place the cursor in the HTML code where you wish to link the Form

  2. Go to the 'Form Links' Tab

  3. Select which forms will be linked from the drop down

  4. Add additional forms if needed

  5. For guidance on where to place the Form in the code, make sure your design team has placed the Form automated tags in your HTML file before uploading

Review and Send

Once everything is set, the last page allows zkipster users to review everything before clicking send.
​ 
Click the box to confirm the email is ready to send and then click 'Send Emails Now', or schedule your email to go out at a later date.

Did this answer your question?