SendGrid Connector Guide

This article provides direction on how to configure and manage your SendGrid connector as well as create and customize templates in the SendGrid environment.

Table of Contents

• Purpose
• Prerequisites
• Connector Configuration
• Booxi Notifications
• Email Structure and Features
• Limitations
• Use Cases
• Troubleshooting
• Documentation and External Links

Purpose

The purpose of the connector is to provide a uniform messaging experience by customizing emails to clients and staff.

Prerequisites

Before using the SendGrid app and Booxi’s connector, both modules must be configured and activated. Prior to doing so, the following steps must be fulfilled:

1. Create a branded SendGrid account
2. Create templates for email notifications to clients, groups and staff depending on the notifications you would like to send
3. Provide Booxi with the following information:
   • Your SendGrid API key (associated to an authenticate Sendgrid account) 
   • The name and email address associated with the admin of your SendGrid account
   • The sender name and email address 
4. Authenticate your domain from Sendgrid (DNS configuration) 
5. Recommendation : ensure to configure the DMARC to authenticate the sender

With the above completed, the SendGrid App and SendGrid Connector must be configured. The following will explain how to do so.

Connector Configuration 

How to Configure SendGrid App

URL: https://app.sendgrid.com

To configure SendGrid App, complete the following steps:

1. Download and install Twilio Authy (required for Two-Factor Authentication)

Choose of the below links:

• Android: https://play.google.com/store/apps/details?id=com.authy.authy
• iOS: https://itunes.apple.com/us/app/authy/id494168017
• Desktop: https://authy.com/download/

1. Domain Authentication and Activation

• First, log in to the SendGrid App by entering your credentials.

• Complete Two-Factor Authentication.
  • • Launch Authy
    • Input code

• Review and validate your account settings.

• Validate that your API keys have been assigned.

• Authenticate your domain.

Domain authentication

1. Go to “Settings” / “Sender Authentication”
2. Choose your “DNS host” in the list (Contact your IT team if you don’t know)
3. Click on “Next”
4. Enter your “From Domain” (as “booxi.com” for Booxi), click on “Next”
5. Add the entry in your DNS center (or contact your IT team with this information)
6. Click on “Verify”

Configuring the Booxi SendGrid Connector

The access to the connector is limited. The connector will be configured and activated by Booxi.

With both modules configured and activated, we can now move on to SendGrid itself.

How to Use SendGrid

Introduction to SendGrid Templates

SendGrid provides a flexible method to customize your email experience. Throughout this document, you will learn to configure, use and manage the SendGrid App and SendGrid Connector in synergy with Booxi’s email service.

To build a custom experience, you will first create multi-purpose design templates using the SendGrid App. Once completed, your Booxi representative will assign your templates to their respective notifications using the SendGrid Connector.

In SendGrid App, access Templates:

1. Log in to your SendGrid App Account.
2. On the left-hand side menu, click on Email API / Dynamic Templates.
   
   
3. Select Dynamic Templates

On the right-hand side of the screen, you will find a list of all templates currently available. If it is your first session, the list will be empty. Otherwise, all templates you created will be listed there. On this screen, we can edit an existing template or create a new one.

Let’s have a look at the notifications your templates will be assigned to.

Template Assignment

Templates will be assigned to notifications by Booxi per a customer's requirements.

Template Customization

How to create a new template

In order to create a new template in SendGrid App:

1. Click on “Email API / Dynamic Template” in the left-hand menu.
   
   
   
   
2. Select “Create a Dynamic Template”
   
   
   
   
3. Assign a name to your new Template.
4. Click on your newly created Template.
5. Click on “Add version”
6. Select a Template Design

1. Select an editing mode

1. • Design Editor: Visual, drag-and-drop editing tool with sets of prefab controls.
   • Code Editor: HTML editing with visual preview. Full control over editing.
     
     
     
     
2. Edit your template.

How to edit an existing template

To edit an existing template in SendGrid:

1. Click on “Email API / Dynamic Template” in the left-hand menu.
2. In the right-hand list, select the template you wish to edit by clicking on it.
   
   
   
   
3. Edit your Template.

How to customize templates

The template editor UI is comprised of 3 main components:

• Code Editing Tab

You can view and edit code in HTML with native support for HandleBars.

• Test Data Tab

Test data allows you to populate variables in your template. It must be formatted as JSON, and is used to preview dynamic content and iterators found in your emails.

• Preview Window

On the right-hand side of the editing UI, the preview window allows visualizing how your email will appear on desktop, mobile and in plain text.

Booxi Notifications

A notification is a message sent by Booxi’s API that will be captured by SendGrid Connector to determine what email template should be sent out. Notifications are categorized in three groups or modules.

Notifications Groups

• Custom Client Notifications
  • • Custom notification message to a client via email. This notification only applies if you use the Notify Client feature in the Booxi back office. 
• Client Appointment Notifications
  • • Notifications directed to clients who booked an appointment.
• Group Event Notifications
  • • Notifications directed to clients who made a reservation in a group event, and attendees for whom the reservation was made.

Custom Client Notification

This feature allows staff to send a custom notification message to a client via email.

Client Appointment Notifications

This module allows you to manage notifications directed to clients who booked an appointment. 

Staff Appointment Notifications

This module allows you to manage notifications directed to clients who booked an appointment. 

Group Event Notifications

This module allows you to manage notifications directed to clients who made a reservation in a group event, and attendees for whom the reservation was made. 

Email Structure and Features

Your custom email will be built using a set of features partitioned in blocks, each block having its own purpose. Here is a list of blocks and their associated features.

Using a sample email, the following will cover each feature and will provide details on how to build your message with associated data and block segments. Please take note that the following uses partial data. For a complete list of content variables, please see the content variables section below.

Announce + Message

The purpose of this block is to provide your clients with information about their appointment, either for an updated status, a word of gratitude or a confirmation.

Example

Here’s an example which includes a greeting statement and details of the appointment.

Test Data

In the below data, a “client” and “event” data structures are created and populated.

"client":
{
   "firstname":"Jane",
   "lastname":"Do",
   "email":"jane.do@test.fr",
   "gender":"Unknown",
   "lang":"eng",
   "language":"eng",
   "request":null
}
"event":
{
   "date":
   {
      "start":
      {
         "s_month_shortly":"Dec.",
         "c_day":"18",
         "s_day":"Friday",
         "half_day":"pm",
         "hour":12,
         "u_hour":12,
         "c_minute":"00",
      },
      "duration":
      {
         "hours":0,
         "c_hours":"00",
         "minutes":30,
         "c_minutes":"30"
      },
      "timezone":"(EST)"
 }

Code

The below code segment creates an announce which includes an introduction and a summary of the appointment. It is constructed with the data defined above.

<div>

   <h1 class="title1 fnt_colMain" aria-labelledby="title1 fnt_colMain">
   Hello {{client.firstname}},  
   </h1>

   <h1 class="title1 fnt_colMain" aria-labelledby="title1 fnt_colMain">
   Your appointment has been confirmed for 
   {{event.date.start.s_day}}{{event.date.start.s_month_shortly}}
   {{event.date.start.c_day}} at
   {{event.date.start.u_hour}}:{{event.date.start.c_minute}}
   {{event.date.start.half_day}} {{event.date.timezone}}.
   </h1>

</div>

Instructions

Instructions are used to provide your client with important information or guidance prior to his appointment.

Example

Here’s an example where clients are requested to be present 15 minutes prior.

Test Data

In the below data, instructions are defined for a specific service.

"services":
[
   {
      "id": 51438,
      "name": "Smart booking solutions that work for everyone",
      "description": "Focus on your customers, not on appointment management
      Turn the page on paper agendas, and accept online booking with payment,
      for appointments, events and workshops.",
      "instruction": "Please join us 15 minutes before the meeting.",
      "tags": "VIP Service",
      "location": "Business",
      "location_text": "",
      "image": "https://storage.googleapis.com/booxi/rounded.svg",
      "category": 
      {
         "id": 5790,
         "name": "Booking for Service Business",
         "description": "",
         "image":"https://storage.googleapis.com/booxi/rounded.svg"
      }
   }
]

Code

The below code segment validates if instructions have been assigned to the service and if so, displays them in the message.

{{#each services}}
   {{#if this.instruction}}
      <div class="part" aria-labelledby="part">
         <div class="block" aria-labelledby="block">
            <div class="table" aria-labelledby="table">

               <span class="table_cell" aria-labelledby="table_cell">
                  <img class="icon" aria-labelledby="icon"
                  src="http://cdn.sendgrid.net/97/65a/40x40.png"
                  alt="important instructions"/>
               </span>

               <span class="table_cell" aria-labelledby="table_cell" style="vertical-align: middle;">
                  <p class="fnt_colMain" aria-labelledby="fnt_colMain">
                  Important instruction</p>
               </span>

            </div>

         <div style="clear: both;"></div>
         <div class="table" aria-labelledby="table">

           <span class="table_cell" aria-labelledby="table_cell">
             <p class="fnt_colMain" aria-labelledby="fnt_colMain"></p>
           </span>

         </div>
      </div>
   </div>

   <div style="clear: both;"></div>
   
   {{/if}}

{{/each}}

Appointment Details

All details pertaining to the appointment should be listed and detailed in this block. The level of details is yours to decide. The example below includes information from features. 

Example

Appointment details listed as a table with 3 separate sections.

Appointment Details - Service

This block lists the service to be rendered. It includes the service’s name and description, its duration and the staff who will deliver it. 

Test Data

Service description and staff assigned to that service.

"services": 
[
   {
      "id": 51438,
      "name": "Smart booking solutions that work for everyone",
      "category":
      {
         "id": 5790,
         "name": "Booking for Service Business",
         "description": "",
         "image": ""
      },
      "amount": "0.50",
      "currency": "USD",
      "s_currency": "$",
      "staff": 
      {
         "language": "eng",
         "biography": "",
         "position": ".",
         "firstname": "John",
         "lastname": "Smith",
         "profile_image": ""
      }
   }
]

Code

The below code displays the service name, duration and assigned staff.

{{#each services}}
   <div class="part flex" aria-labelledby="part flex">
      <div class="colServiceLogo" aria-labelledby="colServiceLogo">
         {{#if this.image}}
            <div>
               <img class="service" aria-labelledby="service" src="{{this.image}}" alt="service_image"/>
            </div>
         
      </div>
      <div class="colServiceDetail" aria-labelledby="colServiceDetail">

         <p class="fnt_colMain" aria-labelledby="fnt_colMain" style="font-weight:bold;">
            {{this.category.name}}
         </p>

         <p class="fnt_colMain" aria-labelledby="fnt_colMain" style="text-align:left;">
            {{this.name}}
         </p>

         <p class="fnt_colSecondary small" aria-labelledby="fnt_colSecondary small"   style="text-align:left;">
            {{#greaterThan this.duration.hours 0}}
               {{../duration.hours}}
            {{/greaterThan}}

            {{#eq this.duration.hours 1}}
               hour
            {{/eq}}

            {{#greaterThan this.duration.hours 1}}
               hours
            {{/greaterThan}}                        

            with {{this.staff.firstname}} {{this.staff.lastname}}
         </p>

         <p class="right fnt_colSecondary" aria-labelledby="right fnt_colSecondary">
            {{#equals this.amount 0}}
               Free
            {{else}}

            <span class="currency" aria-labelledby="currency">
               {{../s_currency}}{{../amount}}
            </span>

            {{/equals}}                

         </p>
      </div>
   </div>
{{/each}}

Appointment Details - Invoice

This block lists the transaction details, subtotal, taxes if applicable, total and amount due.

Test Data

Transaction details and applicable taxes.

"payment":
{
   "total":"100.00",
   "subtotal":"80.00",
   "due":"20.00",
   "currency":"USD",
   "s_currency":"$",
   "payment_online_amount":null,
   "payment_status":"None",
   "taxes":
   [ 
      { 
         "name":"Tax1",
         "rate":"13.5",
         "amount":"20.30"
      },
      { 
         "name":"Tax2",
         "rate":"9.5",
         "amount":"13.30"
      }
   ]
}

Code

The below code displays, total, sub-total, taxes and amount due.

<div class="part flex" aria-labelledby="part flex">
   <div class="colHalf" aria-labelledby="colHalf">
      <div class="innerFlex" aria-labelledby="innerFlex">

         <div class="colHalf" aria-labelledby="colHalf">
            <p class="left fnt_colSecondary" aria-labelledby="left fnt_colSecondary">Subtotal</p>
         </div>

         <div class="colHalf" aria-labelledby="colHalf">
            <p class="right fnt_colMain" aria-labelledby="right fnt_colMain">
               {{payment.s_currency}}{{payment.subtotal}}
            </p>
         </div>

       </div>

       {{#each payment.taxes}}

       <div class="innerFlex" aria-labelledby="innerFlex">
          <div class="colHalf" aria-labelledby="colHalf">
             <p class="left fnt_colSecondary" aria-labelledby="left fnt_colSecondary"></p>
          </div>

          <div class="colHalf" aria-labelledby="colHalf">
             <p class="right fnt_colMain" aria-labelled="right fnt_colMain">
                {{../payment.s_currency}}{{this.amount}}
             </p>
          </div>

       </div>

       

    </div>

    <div class="h_space" aria-labelledby="h_space"></div>

    <div class="colHalf" aria-labelledby="colHalf">
       <div class="innerFlex" aria-labelledby="innerFlex">
          <div class="colHalf" aria-labelledby="colHalf">
             <p class="left fnt_colSecondary" aria-labelledby="left fnt_colSecondary">Total</p>
          </div>

          <div class="colHalf" aria-labelledby="colHalf">  
             <p class="right" aria-labelledby="right">
                <span class="currency fnt_colMain" aria-labelledby="currency fnt_colMain">
                   {{payment.s_currency}}{{payment.total}}
                </span>
             </p>
          </div>
      </div>

      <div class="innerFlex" aria-labelledby="innerFlex">
         <div class="colHalf" aria-labelledby="colHalf">
            <p class="left fnt_colSecondary" aria-labelledby="left fnt_colSecondary">Amount due</p>
         </div>

         <div class="colHalf" aria-labelledby="colHalf">
            <p class="right large" aria-labelledby="right large">
               <span class="currency fnt_colMain" aria-labelledby="currency fnt_colMain">
                  {{payment.s_currency}}{{payment.due}}
               </span>
            </p>
         </div>

      </div>
    </div>
  </div>

Appointment Details - Booking Summary

This block lists all remaining details not previously covered  such as date, time, mean and location. The time is provided in the store location time zone, except for video conference and by phone appointment, which can use a time zone selected by the client. To avoid confusion, it is always preferable to specify the time zone next to the time.

Test Data

"event":
{
   "date":
   {
      "start":
      {
         "year":2020,
         "month":12,
         "c_month":"12",
         "s_month":"December",
         "s_month_shortly":"Dec.",
         "day":18,
         "c_day":"18",
         "s_day":"Friday",
         "s_day_short":"Fri.",
         "half_day":"pm",
         "hour":12,
         "u_hour":12,
         "c_hour":"12",
         "u_c_hour":"12",
         "minute":0,
         "c_minute":"00",
         "second":0,
         "c_second":"00"
      }
      "timezone": "(EST)"
   }
}

Code

The code below displays the date and time of an appointment.

<div class="flex" aria-labelledby="flex">
   <div class="colHalf" aria-labelledby="colHalf">
      <p class="left fnt_colSecondary" aria-labelledby="left fnt_colSecondary">When</p>
      <p class="left fnt_colMain" aria-labelledby="left fnt_colMain">
         {{event.date.start.s_day}}, {{event.date.start.s_month}} 
         {{event.date.start.c_day}}, {{event.date.start.year}}
      </p>    
   </div>

   <div class="h_space" aria-labelledby="h_space"></div>

   <div class="colHalf" aria-labelledby="colHalf">
      <p class="left fnt_colSecondary" aria-labelledby="left fnt_colSecondary">Time</p>
      <p class="left fnt_colMain" aria-labelledby="left fnt_colMain">
         {{event.date.start.c_hour}}:{{event.date.start.c_minute}}
      </p>
   </div>
</div>

Appointment Details - Location

As part of the booking summary, location is the venue (real or virtual) or mean by which the service is rendered (Phone, Video Conference, etc...).  For appointments booked at a physical location, the value of “location” must be set to “Business”.

Test Data

Appointment location set as “Video”, an URL is provided to participate.

{
   "location":"Video",
   "location_text":"A description of the location. Only available by VideoConference",
   "video_url":"zoom.../"
}

Code

The below code parses where the appointment is held and displays its location.

<div class="h_space" aria-labelledby="h_space"></div>

<div class="colHalf" aria-labelledby="colHalf">
   {{#equals location "Business"}}
      <p class="left fnt_colSecondary" aria-labelledby="left fnt_colSecondary">
         Phone    
      </p>
      <p class="left fnt_colMain" aria-labelledby="left fnt_colMain">
         {{business.phone}}
      </p>
   {{/equals}}                    
      
   {{#equals location "Video"}}
      <p class="left fnt_colSecondary" aria-labelledby="left fnt_colSecondary">
         Video Link
      </p>
      <p class="left fnt_colMain" aria-labelledby="left fnt_colMain">
         <a href="{{../video_url}}" target="_blank">Join Video Conference</a>
      </p>
   
   
   <p class="left fnt_colSecondary" aria-labelledby="left fnt_colSecondary">Web </p>
   <p class="left fnt_colMain" aria-labelledby="left fnt_colMain">
      <a src="{{business.url_site}}"> Visit our website </a>
   </p>

</div>

Appointment Details - Additional Request

This block is used to display any additional requests or demands from your client.  That information can be displayed individually in its own section or included with the appointment details.

Test Data

Additional request assigned in the service data structure.

"client":
{
   "firstname":"Jane",
   "lastname":"Do",
   "email":"jane.do@test.fr",
   "membership":"",
   "home_phone":"0000000000",
   "mobile_phone":"",
   "gender":"Unknown",
   "lang":"eng",
   "language":"eng",
   "request":"Please read my previous email."
}

Code

The below code displays any additional request for a specific service.

<p class="fnt_colMain left important" aria-labelledby="fnt_colMain left important">
   Additional Request 
</p>

<p class="fnt_colMain left" aria-labelledby="fnt_colMain left">
   {{this.request}}
</p>

Survey

This block lists all information pertaining to surveys. Surveys are divided into two categories:

Online Booking Survey

Surveys conducted at the time of booking an appointment. Results can be listed in the email.

Test Data

"surveys":
[
   {
      "name":"question1",
      "title":"How would you like to be contacted?",
      "required":true,
      "answer":"item1"
   },
   {
      "name":"question2",
      "title":"Feel free to describe your ideal fragrance",
      "required":false,
      "answer":"Sweet yet robust"
   }
]

Code

The code below scans all surveys and the corresponding answers. Results are then assigned.

{{#each surveys}}
   {{#each this}}
   <div class="column" aria-labelledby="column">
      <p class="left fnt_colSecondary" aria-labelledby="left fnt_colSecondary">  
         {% raw %}{{this.title}}
      </p>             
                                                      
      <p class="left fnt_colMain" aria-labelledby="left fnt_colMain">
         {{this.answer}}
      </p>

   </div> 
   
 

Survey URL

Includes an URL where your client can be directed to fill out a survey prior to their appointment.

Test Data

"survey": {"survey_url": "https://.../survey10222021.html" }

Code

Survey URL assignment

<a href="{{survey.survey_url}}" style="background-color:#000000; border:1px solid #000000; border-color:#000000; border-radius:6px; border-width:1px; color:#ffffff; display:inline-block; font-size:18px; font-weight:bold; letter-spacing:0px; line-height:normal; padding:12px 20px 12px 20px; text-align:center; text-decoration:none; border-style:solid; font-family:inherit;" target="_blank">

   Answer the survey

</a> </td>

Action Buttons

This block should display a set of actions allowing your client to minimally view, modify and cancel his appointment.

Example

Test Data

In the below code segment, three urls are defined as “view”, “modify” and “cancel”.

event_url": 
[
   { 
      "name":"View",
      "url":"https://site.booxi.eu/html/...=2b&from=jane.do%40test.eng" 
   },
   { 
      "name":"Modify",
      "url":"https://site.booxi.eu/html/...=2b&action=modify&lang=eng" 
   },
   { 
      "name":"Cancel",
      "url":"https://site.booxi.eu/html/...=2b&action=cancel&lang=eng" 
   } 
]

Code

<div style="clear: both;"></div>
<div class="divider" aria-labelledby="divider"></div>
<div class="part" aria-labelledby="part">
   <div style="display:table;margin: 0 auto;">
      <p class="fnt_colSecondary" aria-labelledby="fnt_colSecondary" style="margin: 0 auto;">
         Use the following buttons to modify or cancel your appointment
      </p> 
   </div>
  
   {{#equals (length event_url) 3}}
      
   <div class="table tb3" aria-labelledby="table tb3">

      {{#each @root.event_url}}
         <div class="column" aria-labelledby="column">
            <div class="action_button" aria-labelledby="action_button" onclick="{{this.url}}">
               <p class="fnt_colMain" aria-labelledby="fnt_colMain" style="font-weight:bold; margin:6px auto;">
                  {{this.name}}
               </p>
            </div>
         </div>
      {{/each}}

   </div>
   {{/equals}}

</div>

Footer

In the mail footer, display terms, policies, preferences as well as your business logo.

Example

Test Data

“Terms of Use” and “Privacy Policy” URLs are defined.

"terms": 
{
   "privacy_url": "URL for your privacy terms",
   "legal_url": "URL for your legal terms",
   "translation":
   {
      "fra":
      {
         "language": "fra",
         "legal_url": "URL for your legal terms in French",
         "privacy_url": "URL for your privacy terms in French"
      },
      "eng":
      {
         "language": "eng",
         "legal_url": "URL for your legal terms in English",
         "privacy_url": "URL for your privacy terms in English"
      }
   }
}

Code

<p class="fnt_colSecondary" aria-labelledby="fnt_colSecondary">

  <a href="{{terms.terms_url}}" class="term_policy fnt_colSecondary" aria-labelledby="term_policy fnt_colSecondary">
  Term of Use
  </a>

  <span style="margin:0 1em;">|</span>
  <span>booxi inc.(c) 2020</span>
  <span style="margin:0 1em;">|</span>

  <a href="{{terms.privacy_url}}" class="term_policy fnt_colSecondary" aria-labelledby="term_policy">
  Privacy Policy
  </a>

</p>

ICS Support

Appointment, group reservations and staff emails can optionally include an ICS file. The ICS file includes information such as the service name, date and time of a booking.

A download link will appear in the footer of the email notification.

The ICS contains the following information.

Test and Validation

You can test and validate your templates by following the below steps:

• Click on the “Settings” menu on the left-hand side of the screen.
• Click on “Test your eMail” to expand its content.
• Fill out all relevant information.
• Click on “Send Test Message”

Content Variables

This section lists all content variables supported by email templates.

Header

Business

The object “business” contains all information pertaining to the merchant associated with an appointment. It is formatted as a multi-field object and includes the following fields.

"url_site": "https//..."

"url_logo": "https://..."

"booxi_url_site": "https://..."

"name": "YOUR_BUSINESS_NAME"

"translation": {
        "fra": {
          "language": "fra",
          "description": "description translated" 
        },
      "client_language_exist": true,
      "staff_language_exist": true 
}

"currency": {
        "raw": "EUR",
        "symbol": "€" 
}

"language": "fra"

"timeZone": "EST"

 "timezone_detail": {
          "timezone_str": "Eastern Standard Time",
          "timezone_abbr": "EST",
          "timezone_gmt": "GMT05" 
 }

"phone": {
        "raw": "0000000000",
        "formatted": "+41 44 668 18 00",
        "detail": {
              "international": "+41 44 668 18 00",
              "national": "044 668 18 00",
              "E164": "+41446681800",
              "country_code": "41"  }
},

"terms": {
        "legal_url": "",
        "privacy_url": "",
        "translation": {
              "fra": {
                  "language": "fra",
                  "legal_url": "",
                  "privacy_url": ""  },
          "client_language_exist": true,
          "staff_language_exist": true  }
},

"address": {
        "street": "",
        "city": "",
        "postalCode": "",
        "state": "",
        "country": ""
}

"email": "merchant_email@domain.mail"

"url_site": "https//..."

"url_logo": "https://..."

"booxi_url_site": "https://..."

"name": "YOUR_BUSINESS_NAME"

"translation": {
        "fra": {
          "language": "fra",
          "description": "description translated" 
       },
      "client_language_exist": true,
      "staff_language_exist": true 
}

"currency": {
        "raw": "EUR",
        "symbol": "€" 
}

"language": "fra"

"timeZone": "EST"

"timezone_detail": {
          "timezone_str": "Eastern Standard Time",
          "timezone_abbr": "EST",
          "timezone_gmt": "GMT05"  
}

"phone": {
        "raw": "0000000000",
        "formatted": "+41 44 668 18 00",
        "detail": {
              "international": "+41 44 668 18 00",
              "national": "044 668 18 00",
              "E164": "+41446681800",
              "country_code": "41"  }
 },

"terms": {
        "legal_url": "",
        "privacy_url": "",
        "translation": {
              "fra": {
                  "language": "fra",
                  "legal_url": "",
                  "privacy_url": ""  
               },
          "client_language_exist": true,
          "staff_language_exist": true  
        }
},

"address": {
        "street": "",
        "city": "",
        "postalCode": "",
        "state": "",
        "country": ""
 }

"email": "merchant_email@domain.mail"

Client

The object “client” contains all information pertaining to the client associated with an appointment. It is formatted as a multi-field object and contains the following fields.

"firstname": "John"

"lastname": "Smith"

"email": "johnsmith@domain.com"

"membership": "IM-00993738"

"home_phone": "1178922001"

"home_phone_detail": {

          "raw": "0000000000",

          "formatted": "+41 44 668 18 00",

          "detail": {

                "international": "+41 44 668 18 00",

                "national": "044 668 18 00",

                "E164": "+41446681800",

                "country_code": "41"  }

      }

"mobile_phone": "1949893729"

"mobile_phone_detail": {

          "raw": "0000000000",

          "formatted": "+41 44 668 18 00",

          "detail": {

                "international": "+41 44 668 18 00",

                "national": "044 668 18 00",

                "E164": "+41446681800",

                "country_code": "41"  }

      }

"gender": ""

"lang": "fra"

"timeZone": "EST"

"timezone_detail": {

          "timezone_str": "",

          "timezone_abbr": "",

          "timezone_gmt": "GMT05"  

}

"request": "additionalRequest"

"tracking_qrcode_url": ""

Attendees

The object “attendees” contains an array of client objects, one for each client associated with a group reservation. This array is of length “number” where that value describes the number of clients (ex. "number": 1).

"number" : 1,
    "attendees": [
    {
      "firstname": "",
      "lastname": "",
      "email": "",
      "membership": "",
      "home_phone": "",

      "home_phone_detail": {
        "raw": "0000000000",
        "formatted": "+41 44 668 18 00",
        "detail": {
            "international": "+41 44 668 18 00",
            "national": "044 668 18 00",
            "E164": "+41446681800",
            "country_code": "41"  }
      },
      "mobile_phone": "",
      "mobile_phone_detail": {
          "raw": "0000000000",
          "formatted": "+41 44 668 18 00",
          "detail": {
                "international": "+41 44 668 18 00",
                "national": "044 668 18 00",
                "E164": "+41446681800",
                "country_code": "41"  
          }
      },
      "gender": "",
      "lang": "",
      "language": "",
      "timeZone": "",
      "timezone_detail": {
          "timezone_str": "",
          "timezone_abbr": "",
          "timezone_gmt": "GMT05"  },
      "request": "additionalRequest",
      "tracking_qrcode_url": ""
    }
  ]

Services

The object “services” contains an array of all services included in an appointment. It is formatted as a multi-field object and contains the following fields.

"amount": "price.amount"

"staff": 
[
   {
     "firstname": "John",
     "lastname": "Smith",
     "profile_image_url": "" , 
     "email": "staff_email@domain.mail"
   }
]

"date": {

          "start": {
                "year": 2000,
                "month": 1,
                "c_month": "01",
                "s_month_shorty": "jan",
                "day": 1,
                "c_day": "01",
                "s_day": "monday",
                "s_day_short": "mon",
                "half_day": "am|pm",
                "hour": 13,
                "u_hour": 1,
                "c_hour": "13",
                "u_c_hour": "01",
                "minute": 1,
                "c_minute": "01",
                "second": 1,
                "c_second": "01"  
          },

          "end": {
                "year": 2000,
                "month": 1,
                "c_month": "01",
                "s_month_shorty": "jan",
                "day": 1,
                "c_day": "01",
                "s_day": "monday",
                "s_day_short": "mon",
                "half_day": "am|pm",
                "hour": 13,
                "u_hour": 1,
                "c_hour": "13",
                "u_c_hour": "01",
                "minute": 1,
                "c_minute": "01",
                "second": 1,
                "c_second": "01"  
          }  
}

"duration": {
          "hours": 1,
          "c_hours": "01",
          "minutes": 1,
          "c_minutes": "01"  
}

"survey": 
[
   {
     "name": "name",
     "question": "question",
     "answer": "answer"  
   }
]

"currency": {
          "raw": "EUR",
          "symbol": "€"  
}

"category": {
   "id": "category id",
   "name": "category name",
   "description": "category description",
   "image": "category image",
   "translation": 
   {
     "fra": 
     {
       "language": "fra",
       "name": "category name translated",
       "description": "category description translated"
     },
     "client_language_exist": true,
     "staff_language_exist": true  
   }
}

"resource": {
   "id": "resource id",
   "name": "resource name",
   "translation": 
   {
     "fra": 
     {
       "language": "fra",
       "name": "resource name translated"
     },
     "client_language_exist": true,
     "staff_language_exist": true  
   }
}

"translation": 
{
   "fra": 
   {
     "language": "fra",
     "name": "service name translated",
     "client_language_exist": true,
     "staff_language_exist": true  
   }
}

"availabilities": 
[
   {
     "start": 
     {
       "year": 2000,
       "month": 1,
       "c_month": "01",
       "s_month_shorty": "jan",
       "day": 1,
       "c_day": "01",
       "s_day": "monday",
       "s_day_short": "mon",
       "half_day": "am|pm",
       "hour": 13,
       "u_hour": 1,
       "c_hour": "13",
       "u_c_hour": "01",
       "minute": 1,
       "c_minute": "01",
       "second": 1,
       "c_second": "01"
     },

     "end": 
     {
       "year": 2000,
       "month": 1,
       "c_month": "01",
       "s_month_shorty": "jan",
       "day": 1,
       "c_day": "01",
       "s_day": "monday",
       "s_day_short": "mon",
       "half_day": "am|pm",
       "hour": 13,
       "u_hour": 1,
       "c_hour": "13",
       "u_c_hour": "01",
       "minute": 1,
       "c_minute": "01",
       "second": 1,
       "c_second": "01"  
     }
   }
]

Surveys

The object “surveys” contains an array of all answers collected through the use of surveys. It is formatted as a multi-field object.

"required": true

"translation": 
{
   "fra": 
   {
     "language": "fra",
     "title": "",
     "client_language_exist": true,
     "staff_language_exist": true  
   }
}

Payment

The object “payment” contains all information pertaining to an appointment’s payment. It is formatted as a multi-field object and contains the following fields.

"total": "10.30"

"total_detail": {
        "integer": 10,
        "decimal": 30  }

"subtotal": "7,30"

"subtotal_detail": {
        "integer": 7,
        "decimal": 30  }

"due": "9,10"

"due_detail": {
        "integer": 9,
        "decimal": 10  }

"currency": {
        "raw": "EUR",
        "symbol": "€"  }

"payment_online_amount": "onlinePaymentAmount"

"payment_status": "onlinePaymentStatus"

"taxes": 
[
   {
     "name": "tax name",
     "rate": "11%",
     "amount": "2,10",
     "amount_detail": 
     {
       "integer": 2,
       "decimal": 10
     }
   }
]

Staff

The object “staff” contains all information related to the staff member who is rendering a service associated with the appointment. It is formatted as a multi-field object and includes the following fields.

"email": "staff_email@domain.mail"

"translation": 
{
   "fra": 
   {
     "language": "fra",
     "position": "position translated"
   },
   "client_language_exist": true,
   "staff_language_exist": true  
}

Event

The object “event” contains the start and end time of an appointment as well as its duration. It is formatted as a multi-field object and contains the following fields.

"start": {
        "year": 2022,
        "month": 1,
        "c_month": "01",
        "s_month_shorty": "jan",
        "day": 1,
        "c_day": "01",
        "s_day": "monday",
        "s_day_short": "mon",
        "half_day": "am|pm",
        "hour": 13,
        "u_hour": 1,
        "c_hour": "13",
        "u_c_hour": "01",
        "minute": 1,
        "c_minute": "01",
        "second": 1,
        "c_second": "01" 
}

"end": {
        "year": 2022,
        "month": 1,
        "c_month": "01",
        "s_month_shorty": "jan",
        "day": 1,
        "c_day": "01",
        "s_day": "monday",
        "s_day_short": "mon",
        "half_day": "am|pm",
        "hour": 14,
        "u_hour": 2,
        "c_hour": "14",
        "u_c_hour": "02",
        "minute": 1,
        "c_minute": "01",
        "second": 1,
        "c_second": "01"  
}

"duration": {
        "hours": 1,
        "c_hours": "01",
        "minutes": 1,
        "c_minutes": "01" 
}

Limitations

The template assignment is performed by Booxi.

Use Cases

Filtering Content per Language

Content can be filtered based on the client’s preferred language. The example below showcases how to display a service’s name in the client’s language by validating if the translation exists and if so, use its value.

{{#each services}}
   {{#if this.translation.client_language_exist}}
      {{#each this.translation}}
         {{#equals this.language @root.client.language}}
            {{this.name}}
         {{/equals}}
      {{/each}}
   {{else}}
      {{this.name}}
   {{/if}}
{{/each}}

Troubleshooting

Your SendGrid account was configured with an email address to inform you whenever there is an error preventing SendGrid from sending emails.

If you receive an error message regarding an invalid template, it is because one of the templates you configured Booxi connector with, is not accessible anymore. It may have been deleted since, or the associated template does not have any active version.

A message was received from this address by our systems that had errors in the SMTPAPI header, and cannot be processed due to the following:

  - The template id must be a valid template id for your account. 

Documentation and External Links 

SendGrid’s How to Create Templates

Template Guide 

HandleBars

How to Use Handlebars with SendGrid