Documentation
REQUEST ACCESS

Launch

Suggest Edits

Now that the Hurdlr Embedded experience is up and running in your product, you're ready to launch with your users. The Hurdlr API team provides the following services immediately prior to every customer-partner's launch:

Support Staff Training

Hurdlr's Customer Success team schedules training sessions with your support staff to get them up to speed on supporting accounting use cases. Your support staff's leadership will have direct access to Hurdlr's Customer Success team, allowing your team to maintain its brand voice while having the comfort of direct access to experts in Hurdlr's Embedded experience. Additionally, Hurdlr's Customer Success team provides help center content that your team can repurpose to quickly create its own help center material for your users.

Quality Assurance

For your benefit, Hurdlr's QA team tests your sandbox implementation prior to your go-live date. Once you provide Hurdlr with credentials to your sandbox or staging environment, Hurdlr's experienced QA team will verify your implementation of the Hurdlr API as well as provide UX feedback.

Production Access to Hurdlr

Once the QA process is complete, you should:

  1. Request Production keys to the Hurdlr API
  2. Update the Hurdlr API URL from https://sandbox.hurdlr.com to https://prod.hurdlr.com
  3. Change the link used to Hurdlr Embedded experience from:

    <script src="https://cdn.sandbox.hurdlr.com/embedded/latest/hurdlr.js"></script>
    to the following in your production builds: 
    <script src="https://cdn.prod.hurdlr.com/embedded/latest/hurdlr.js"></script>

Production Access to Integrations

An important part of launching your product is getting production environment access to the various integrations (e.g. Plaid, Unit, Stripe) that your product utilizes. Given the sensitive nature of the data being processed, these providers often require security questionnaires prior to granting production access. The Hurdlr API team, which is SOC 2 Type 2 compliant, is experienced with these approval processes and will be ready to support you through this process.

Email Branding

To ensure your new accounting product's emails match with the rest of your brand's design language, Hurdlr Embedded offers the ability for report and invoicing emails to go out from your domain and with customizable design templates that align with your brand.

Domain (SMTP) Configuration

Hurdlr uses SMTP to send emails from your domain. Here’s what Hurdlr needs from you:

  1. SMTP Username
  2. SMTP Password
  3. SMTP Host URL (e.g., smtp.mandrillapp.com for Mandrill)
  4. SMTP Port (generally 465 for SSL or 587 for TLS)
  5. Preferred “From” Address for specific email types:
    1. Reports: e.g. [email protected]
    2. Invoices: e.g. [email protected]

Email Design Customization

Hurdlr can customize two email categories: report emails and invoice emails. Report emails can be split into emails with an attachment, and emails with a link to a download. For each of these report email types, there can be a separate email for PDF reports and for XLS reports, for a total of four different report related emails:

  1. Report Emails
    1. Emails with report attachments
      1. XLS
      2. PDF
    2. Emails with links to reports
      1. XLS
      2. PDF
  2. Invoice Emails

To customize these, please provide an HTML template for each email type (5 total templates).

Dynamic Content in Templates

Templates can include both dynamic and static content:

  1. Dynamic Content: Use double braces with a descriptive name (e.g., {{ companyName }}) to denote fields Hurdlr will populate automatically.
  2. Static Content: Include any fixed elements as plain HTML, such as a recurring message or footer.

Templates

  1. Invoice Email HTML Template
    An HTML document with the following elements:
    1. Inline CSS styles
    2. Static content as needed
    3. Optional <img> tags linking to remote images
    4. Dynamic Placeholders:
      1. Company Information: {{ companyName }}, {{ companyLogo }}, {{ brandColor }}
      2. Invoice Information: {{ invoiceName }}, {{ dueDate }}, {{ balanceDue }}, {{ clientName }}, {{ discount }}, and {{ notes }},
      3. Line items: {{ unitPrice }}, {{ quantity }}, {{ totalAmount }}
        1. Hurdlr can handle line items in a loop, so you only need to indicate line item fields once in your template
    5. A button linking to the invoice (Hurdlr will handle the link insertion).
    6. Messaging - Hurdlr uses the same email template for a variety of invoice related updates. You can provide messaging for these as desired, otherwise you can use Hurdlr's default messaging in your email template (e.g., Invoice Sent, Reminder, Paid, Refunded, Cancelled)
  2. Report Email HTML Template with the report attached
    1. Inline CSS styles
    2. Static content as needed
    3. Optional <img> tags linking to remote images
    4. Optional alternate static content between XLS and PDF attached reports
  3. Report Email HTML Template with a link to download the report
    1. Inline CSS styles
    2. Static content as needed
    3. Optional <img> tags linking to remote images
    4. A download button (Hurdlr will add the link)
    5. Optional alternate static content between XLS and PDF linked reports

Best practices

  1. Many email clients do not support certain common CSS properties, notably box-shadow, justify-content, and flex. Hurdlr recommends using a table (<table>) for your email layout.
    1. For a comprehensive list of supported CSS properties by email client, see Campaign Monitor’s CSS Guide.
    2. To test your HTML email, there are various online tools available. Check out this list of email preview tools.
  2. Web fonts are often unsupported by email clients, so using a web-safe font as a backup is recommended. For a list of web-safe fonts and their support by operating system, see CSS Font Stack’s Guide.
  3. For any static images, consider publicly hosting them and providing Hurdlr with a link to embed in your template. Email clients may encounter issues rendering images, leading to potential resolution drops, slower load times, or blocking the image altogether. If you decide to use images, make sure your design still stands without them.
  4. Embedded CSS using the <style> tag is allowed, but inline styling renders more consistently in email clients.
    1. Consider using the Premailer tool to convert CSS style-sheets to inline CSS
  5. Checking emails on mobile devices is becoming increasingly common, so make sure your template renders correctly for mobile email clients as well.

Example Templates

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">


  <style>
  body {
    -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
  }
  img {
    -ms-interpolation-mode: bicubic;
  }
  img {
    border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;
  }
  body {
    height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;
  }
  body {
    -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
  }
  img {
    -ms-interpolation-mode: bicubic;
  }
  img {
    border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;
  }
  body {
    height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;
  }
  @media screen and (max-width:600px) {
    h1 {
      font-size: 32px !important; line-height: 32px !important;
    }
  }
  </style>
</head>
<body style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; margin: 0; padding: 0;" bgcolor="#f4f4f4">

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;">

  <tr>
    <td bgcolor="{{#brandColor}}{{brandColor}}{{/brandColor}}{{^brandColor}}#2a8c19{{/brandColor}}" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 20px 10px;">
    </td>
  </tr>

  <tr>
    <td bgcolor="{{#brandColor}}{{brandColor}}{{/brandColor}}{{^brandColor}}#2a8c19{{/brandColor}}" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0px 10px;">

      <table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px; border-radius: 4px 4px 0px 0px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;">
        <tr>
          <td bgcolor="#ffffff" align="center" valign="top" style="border-radius: 4px 4px 0px 0px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 40px 20px 0px;">
            {{#brandColor}}
            {{#logoUrl}}
            <img alt="Brand logo" src="{{ logoUrl }}" style="max-width: 550px; max-height: 200px; -ms-interpolation-mode: bicubic; height: auto; line-height: 100%; outline: none; text-decoration: none; border-width: 0;" border="0">
            <br>
            <br>
            {{/logoUrl}}
            {{/brandColor}}
            {{^brandColor}}
            <img alt="Harold from Hurdlr" src="https://uploads-ssl.webflow.com/59a6e87e38c73b0001ee52f6/5ab56f1455ae527c30124f24_hurdlr%20logo%201100.png" width="550" height="70" border="0" style="-ms-interpolation-mode: bicubic; height: auto; line-height: 100%; outline: none; text-decoration: none; border-width: 0;">
            <br>
            <br>
            {{/brandColor}}
          </td>
        </tr>
      </table>

    </td>
  </tr>
  <tr>
    <td bgcolor="#f7f7f7" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0px 10px;">

      <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;">

        <tr>
          <td bgcolor="#ffffff" align="left" style="color: #666666; font-family: 'Bryant', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0px 30px 20px;">
            <p style="margin-bottom: 16px; color: #666666;" align="center">
              {{ message }}
            </p>

            {{#invoiceTotal}}
            <p style="margin-bottom: 16px; color: #666666;" align="center">
              {{ totalLabel }}: {{ invoiceTotal }}
            </p>
            {{/invoiceTotal}}

            {{#payButtonName}}
            <table style="border-radius: 100px 100px 100px 100px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;" align="center">
              <tr>
                <td bgcolor="{{#brandColor}}{{brandColor}}{{/brandColor}}{{^brandColor}}#fd9724{{/brandColor}}" align="center" style="border-radius: 4px 4px 4px 4px; color: #000000; font-family: 'Bryant', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 12px 40px 10px;">
                  <p style="margin: 0;"><a href="{{ payURL }}" target="_blank" style="text-decoration: none; color: {{#buttonTextColor}}{{buttonTextColor}}{{/buttonTextColor}}{{^buttonTextColor}}#ffffff{{/buttonTextColor}}; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;"> <b>{{ payButtonName }}</b></a></p>
                </td>
              </tr>
            </table>
            {{/payButtonName}}
            <br>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td bgcolor="#f7f7f7" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0px 10px;">
      <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;">
        <tr>
          <td bgcolor="#f7f7f7" align="center" style="color: #666666; font-family: 'Bryant', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 24px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 60px 30px 30px;">
            {{#partnerName}}
            <p style="color: #2323; font-weight: 500; letter-spacing: 0.34px; margin: 0;">
              {{ poweredBy }} {{ partnerName }}
            </p>
            {{/partnerName}}
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

</body>
</html>


<tr>
  <td bgcolor="#f7f7f7" align="center" style="padding: 0px 10px 0px 10px;">
    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
    <tr>
    <td align="center" valign="top" width="600">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
      <tr>
        <td bgcolor="#ffffff" align="left" style="padding: 0px 30px 20px 30px; color: #666666; font-family: 'Bryant', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
          <p style="margin-bottom: 16px">
            {{ exportReportCongrats }} {{ reportPracticeTips }}:
          </p>

          <p style="margin-bottom: 16px">
          <ol>
            <li>{{ downloadReportFile }}</li>
            <br>
            <a href={{ reportLink }}> {{ downloadText }}</a>
            <br>
            <br>
            <li>{{ openReportOnDesktop }}</li>
          </ol>
          </p>
        </td>
      </tr>
    </table>
  </td>
</tr>
</table>
  </td>
</tr>

<tr>
  <td bgcolor="#f7f7f7" align="center" style="padding: 0px 10px 0px 10px;">
    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
    <tr>
    <td align="center" valign="top" width="600">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
      <tr>
        <td bgcolor="#ffffff" align="left" style="padding: 0px 30px 20px 30px; color: #666666; font-family: 'Bryant', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
          <p style="margin-bottom: 16px">
            {{ headline }} {{ reportPracticeTips }}:
          </p>

          <p style="margin-bottom: 16px">
          <ol>
            <li>{{ downloadReportFile }}</li>
            <br>
            <a href={{ reportLink }}> {{ downloadText }}</a>
            <br>
            <br>
            <li>{{ openSpreadsheetOnDesktop }}</li>
          </ol>
          </p>
        </td>
      </tr>
    </table>
  </td>
</tr>
</table>
  </td>
</tr>

<tr>
  <td bgcolor="#f7f7f7" align="center" style="padding: 0px 10px 0px 10px;">
    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
    <tr>
    <td align="center" valign="top" width="600">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
      <tr>
        <td bgcolor="#ffffff" align="left" style="padding: 0px 30px 20px 30px; color: #666666; font-family: 'Bryant', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
          <p style="margin-bottom: 16px">
          	{{ exportReportCongrats }} {{ reportPracticeTips }}:
          </p>

          <p style="margin-bottom: 16px">
          	<ol>
			  <li>{{ saveReportFile }}</li>
			  <li>{{ openReportOnDesktop }}</li>
			</ol>
          </p>
        </td>
      </tr>
    </table>
  </td>
</tr>
</table>
</td>
</tr>

<tr>
  <td bgcolor="#f7f7f7" align="center" style="padding: 0px 10px 0px 10px;">
    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
    <tr>
    <td align="center" valign="top" width="600">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
      <tr>
        <td bgcolor="#ffffff" align="left" style="padding: 0px 30px 20px 30px; color: #666666; font-family: 'Bryant', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
          <p style="margin-bottom: 16px">
          	{{ headline }} {{ reportPracticeTips }}:
          </p>

          <p style="margin-bottom: 16px">
          	<ol>
			  <li>{{ saveReportFile }}</li>
			  <li>{{ openSpreadsheetOnDesktop }}</li>
			</ol>
          </p>
        </td>
      </tr>
    </table>
  </td>
</tr>
</table>
</td>
</tr>

Updated about 2 months ago