To create very stylised or complex Membership Certificates you can use a third party tool to do the initial design, then copy the raw HTML into the Message Template HTML Format field where you can tweak it to add images held in the CiviPlus image library and tokens from the database. You can use pretty much any tool to generate the HTML - Adobe Photoshop/Illustrator are good examples, but even Microsoft Word or Google docs can be used. You could ask one of the Generative AI tools, like ChatGPT, to create your template based on an example format that your provide.
In this article we will cover creating two types of "certificate":
An example of an A4/Letter sized Membership Certificate.
An example of a credit card-sized Membership Card.
Creating an A4 Membership Certificate
When you create the Membership Certificate design in an external tool it is a good idea to add placeholders for the images and tokens that you want to add in, as shown below:
The HTML code for this example is shown below:
Example HTML code for Membership Certificate
Example HTML code for Membership Certificate
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #e9f0f5;
}
.certificate-container {
width: 80%;
max-width: 900px;
margin: 50px auto;
padding: 30px;
background-color: #fff;
border: 15px solid #d1b77e;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
position: relative;
}
.certificate-header {
text-align: center;
margin-bottom: 30px;
}
.certificate-header img {
width: 100px;
margin-bottom: 10px;
}
.certificate-title {
font-size: 28px;
color: #2b3e50;
font-weight: bold;
}
.certificate-subtitle {
font-size: 20px;
color: #4CAF50;
margin: 10px 0;
}
.certificate-name {
font-size: 32px;
font-weight: bold;
color: #2b3e50;
margin: 20px 0;
}
.certificate-text {
font-size: 16px;
color: #555;
line-height: 1.8;
text-align: center;
}
.certificate-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40px;
}
.certificate-footer div {
text-align: center;
}
.footer-signature {
font-style: italic;
font-size: 18px;
}
.footer-role {
font-size: 14px;
color: #555;
}
.footer-verified {
background: #2b3e50;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-align: center;
font-size: 14px;
}
.footer-verified span {
font-weight: bold;
}
.right-ribbon {
position: absolute;
top: 30px;
right: -40px;
transform: rotate(45deg);
background: #4CAF50;
color: #fff;
font-size: 14px;
font-weight: bold;
padding: 10px 40px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>
<div class="certificate-container">
<div class="right-ribbon">VERIFIED 2024</div>
<div class="certificate-header"><img alt="Logo" class="img-responsive" src="your-logo.png" />
<h1 class="certificate-title">Certificate of Membership</h1>
<h2 class="certificate-subtitle">Awarded to</h2>
</div>
<div class="certificate-name">{contact.display_name}</div>
<p class="certificate-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus tempus, quam viverra sit augue faucibus. Lobortis felis facilisis tortor mol.</p>
<div class="certificate-footer">
<div>
<div class="footer-signature">Jane</div>
<div class="footer-role">Course Coordinator</div>
</div>
<div class="footer-verified">
<p>Certificate ID:</p>
<span>c914bc48-7f9c-4c9d-aa7d-21202d9789e4</span></div>
<div>
<div class="footer-signature">Candice O'neal</div>
<div class="footer-role">Director of Operations</div>
</div>
</div>
</div>
To recreate this certificate, copy the HTML into the clipboard, find the appropriate Message Template in CiviPlus and click the Source button in the HTML Format field. Simply paste the HTML code into the window as shown below.
If you now click the Source button again you will see how the HTML will be rendered, and you can start to replace the placeholders that you added during the design with images and tokens from CiviPlus.
Adding a logo image
To add a logo to our certificate we take the following steps:
Select the text "ADD LOGO HERE" which we are going to replace with a logo
Click the Picture/Image icon to add an image
Click Browse Server to show the CiviPlus image library
Choose one of the images to insert in the certificate.
The image will replace the placeholder value.
Adding tokens
For each of the placeholder's do the following:
Select the placeholder text to be replaced, eg "Add Membership Name Here".
Go to the </> Tokens dropdown box and search/select the appropriate token e.g. Certificate Membership / Membership Name
The appropriate token will replace each of the text placeholders.
Once the image and text placeholders have been replaced the Message Template will look like this:
The resultant certificate will look like this:
Creating a Membership Card
The steps to create a Membership card are exactly the same as those to create an A4 certificate described above.
When you create the Membership Card design in an external tool it is a good idea to add placeholders for the images and tokens that you want to add in, as shown below:
The HTML code for this example is shown below:
Example HTML code for Membership Card 1
Example HTML code for Membership Card 1
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">body {
font-family: Arial, sans-serif;
background-color: #fff;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.membership-card {
width: 350px;
border: 2px solid #c2002f;
padding: 20px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.membership-header {
color: #c2002f;
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
.membership-logo {
background-color: #c2002f;
color: white;
padding: 30px;
margin-bottom: 20px;
}
.membership-logo img {
max-width: 100%;
height: auto;
}
.membership-details {
text-align: left;
margin-bottom: 20px;
}
.membership-details p {
margin: 5px 0;
}
.footer {
border-top: 1px solid #c2002f;
padding-top: 10px;
font-size: 12px;
color: #666;
}
.footer .branding {
color: #c2002f;
font-weight: bold;
}
</style>
<div class="membership-card">
<div class="membership-header">YOUR MEMBERSHIP CARD</div>
<div class="membership-logo"><!-- Replace this image URL with your image path --><img alt="" class="img-responsive" src="ADD YOUR IMAGE URL HERE" /></div>
<div class="membership-details">
<p><strong>Add Name Here</strong></p>
<p>Member: <strong>Add Membership Number Here</strong></p>
<p>Expiry Date: <strong>Add End Date Here</strong></p>
</div>
<div class="footer">
<p class="branding">My Organisation Name | #mytag</p>
<p>www.example.org.uk | +44 207 234 9310</p>
</div>
</div>
Now copy this HTML to the clipboard, find the appropriate Message Template in CiviPlus and click the Source button in the HTML Format field. Simply paste the HTML code into the window as shown below.
If you now click the Source button again you will see how the HTML will be rendered, and you can start to replace the placeholders that you added during the design with images and tokens from CiviPlus.
Adding a logo image
To add a logo to our certificate we take the following steps:
Select the text "ADD LOGO HERE" which we are going to replace with a logo
Click the Picture/Image icon to add an image
Click Browse Server to show the CiviPlus image library
Choose one of the images to insert in the certificate.
The image will replace the placeholder value.
Adding tokens
For each of the placeholder's do the following:
Select the placeholder text to be replaced, eg "Add Name Here", "Add Membership Number Here"
Go to the </> Tokens dropdown box and search/select the appropriate token e.g. Certificate Membership / Membership Name , Certificate Membership / Membership ID.
The appropriate token will replace each of the text placeholders.
Once the image and text placeholders have been replaced the Message Template will look like this:
The resultant Membership Card will look like this:
Here's another example of the HTML to create a Membership Card with a contact photo stored in CiviPlus, and a QR code. As explained above, copy and paste the code into the Message Template HTML Format field, and then amend as necessary.
Example HTML code for Membership Card 1
Example HTML code for Membership Card 1
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">body {
font-family: Arial, sans-serif;
background-color: #f3f3f3;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.membership-card {
width: 350px;
height: 200px;
background: linear-gradient(135deg, #000000, #333333);
color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 10px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.membership-details {
width: 60%;
}
.membership-details p {
margin: 5px 0;
font-size: 14px;
}
.membership-details .label {
color: #39ff14;
font-weight: bold;
}
.profile-photo {
width: 80px;
height: 80px;
border-radius: 5px;
background: white;
overflow: hidden;
}
.profile-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.qr-code {
width: 80px;
height: 80px;
margin-top: 10px;
}
.qr-code img {
width: 100%;
height: 100%;
object-fit: cover;
}
.expiry-date {
font-size: 14px;
margin-top: 10px;
}
.brand {
font-size: 18px;
font-weight: bold;
color: #39ff14;
margin-bottom: 5px;
}
.subtext {
font-size: 12px;
color: #aaa;
}
</style>
<div class="membership-card">
<div class="membership-details">
<div class="brand">Any Org</div>
<div class="subtext">Membership Pass</div>
<p><span class="label">NAME:</span> {contact.display_name}</p>
<p><span class="label">Membership:</span> {certificate_membership.membership_name}</p>
<p><span class="label">MEMBER ID:</span> {certificate_membership.id}</p>
<p class="expiry-date"><span class="label">Expiry Date:</span> {certificate_membership.end_date}</p>
</div>
<div>
<div class="profile-photo"><img alt="Profile Photo" class="img-responsive" src="{contact.image_URL}" /></div>
<div class="qr-code"><img alt="QR Code" class="img-responsive" src="ADD COMPANY LOGO HERE" /></div>
</div>
</div>
