Download the HTML email template:

Vyne Email Template

Create your personalised template:

1. Update the <title> tag within the HTML template by replacing “Email Template” with your trading name. <title>Email Template - Complete your payment</title>

The template allows you to either display your business name in text at the top of the email, or to use a logo.

The below element is the CSS associated with your business logo.

<td style="padding: 8px 0; background-color: #F3F2F7; text-align: center;">
<img src="" alt="" height="48">
</td

This element is the CSS associated with your business name.

<td style="padding: 12px 16px; background-color: #F3F2F7;">
        <h1 style="all: unset;font-weight: 500;font-size: 24px;line-height: 32px;color: #0C0128;">
          Add your logo or business name here
        </h1>
      </td>

The template has comments within the code, these are in between the <!-- --> tags. To show the CSS associated with your logo, you’ll need to remove the <!-- at the beginning of the element, and the —-> at the end. To hide either of the logo or your business name, you’ll need to add these <!-- --> tags instead.

If using your business name for the template, you’ll just need to replace the text “Add your logo or business name here” with your business name.

If using a logo for your business instead, you’ll need to:

• Store the image file (preferably .png) online.
• Copy the URL domain.
• Add the URL within the “” in the img tag <img src="".
• Add “{your business name} Logo” in the alt="" tag. This is what will be shown to a customer if the logo image does not load correctly in their email client. For example, alt=”Vyne Logo”
• Adjust the height="48" if required.

1. Replace the {enter your merchant name} with your business name.

<tr class="payment-request-card__subtitle">
      <td style="font-weight: 400;font-size: 16px;line-height: 24px;padding: 24px 16px;">
        <span>Hi there, here is your payment link to pay {enter your merchant name}.</span>
      </td>
    </tr>

This text within the <span> element is free text, so feel free to update this to suit your business’ tone of voice.

1. Add your payment link (URL) into “payment-request-card_pay-button” element.

<tr class="payment-request-card__pay-button">
      <td>
        <!--[if !mso]><!-->
        <a href=""
           style="background: #6C56F9;font-weight: 500;font-size: 16px;line-height: 24px;display: block;text-align: center;color: #FFF;box-shadow: 0 1px 2px rgba(12, 1, 40, 0.05);border-radius: 56px;border: none;padding: 12px 0;width: 100%;text-decoration: none;transition: background 0.25s ease-in-out;">
          Pay with bank
        </a>

The payment link will need to sit in between the “” in the <a href="" section.

1. Finally, the footer information will need to be updated with the relevant information.

<tr class="email-footer__row">
            <td style="padding-bottom: 4px;color: #676380">
              {Enter your legal name}
            </td>
          </tr>
          
          <tr class="email-footer__row">
            <td style="padding-bottom: 4px;color: #676380">
              Company number: {enter your company number}
            </td>
          </tr>

          <tr class="email-footer__row">
            <td style="color: #676380">
              Registered office: {enter your registered office}
            </td>

Replace the information within the curly brackets with your business information.

Example of how your template could look: