Your VistaPrint Website can integrate with free and low-cost online appointment booking tools that will help you remotely stay in touch with your customers and keep generating business.

Many small businesses are going virtual to offer online classes, digital gift cards or one-on-one video appointments with clients. Here are some pro-tips and techniques to begin hosting virtual services too. To start, let’s get into appointment booking and how to offer that on your VistaPrint website.

In this article, we will:

• recommend you create an appointment book with Setmore.com
• guide you on pulling embed code out of your Setmore account
• show you how to paste it into the HTML element in the VistaPrint Website Builder
• Offer more pro tips on publishing, payment and styling

Create your online appointment book

To create your online appointment book, go to Setmore.com and create an account if you don't already have one.

Go through the steps to setup your business. (For more details, check out Setmore's support guide.)

Once you’ve completed the setup flow, go to Apps & Integrations, then scroll down to Website Booking and click on the Booking Widget.

From the Booking Widget page, use these recommended settings to generate the embed code you'll use on your VistaPrint site (click image to enlarge).

Create space on your website for appointment booking

If you already have a VistaPrint website, choose where you want to mention virtual appointments. For example, you can add a short blurb about appointments at the top of your homepage and create a new Appointments page with full details.

Once you've identified where you want to link to your online appointment book, hover your mouse over Add Element. Click the green plus sign to launch the Elements menu and select the HTML element from the Popular section (it's also included under Extras).

Before you can add the element to your site, you'll see a message informing you to make sure you only use code from trusted sources and that VistaPrint cannot guarantee support for custom code. Click I understand to begin customizing the element. 

Once you add the HTML element click the placeholder to launch the toolbar and click the Settings cogwheel on the far left. This will expose the Embed Code menu.

Click the settings gear to add your code and click Update.

Return to your Setmore.com Booking Widget page. In the embed code window you can Select All and Copy the entire block of code.

Paste this into the Embed Code field in HTML element Settings menu:

Click Update to save your embed code. Your booking button will look like this when published:

Click Publish.

See all the steps here:

 NOTE: If the HTML element still looks empty of embed code, please double check your HTML element Settings for the copy/pasted embed code from Setmore.com and confirm you fully updated with the complete block of code.

Create an Appointments page

In addition to creating a space on your Homepage for customers to book appointments, you can also create a detailed Appointments page. 

In your website builder, go to Edit Pages > Add Page > Appointments.

This page contains:

1. Site header
2. Title & HTML block: this is where you'll add your button embed code.
3. Title & paragraph block: this is where you can add information for your customers and clients, such as payment. 
4. Site footer

Collect payment and tips

Small businesses are making revenue by charging for virtual appointments and online classes. You can do the same using your VistaPrint website and other free or low-cost tools. The following tools are only recommendations and are not affiliated with VistaPrint.

Square

Setmore.com allows free Basic users to directly integrate with Square as a payment processor. 

If you have a Square payment processing account (or want to create a free one), linking your Setmore appointment book with your Square account enables you to charge customers on the spot at the moment they request a time with you. Square payment processing is inserted into the appointment booking workflow that your customer sees, so it's seamless.

To learn more about the Setmore’s payment integration options, go here: https://support.setmore.com/en/collections/87087-payments

Venmo

If you use Venmo for payment, add some Title or Paragraph elements to your page mentioning your Venmo handle.

You can also add your Venmo handle to company details, staff details and email notification signatures within Setmore. To learn more about all your options within Setmore, go to their Help articles here: https://support.setmore.com/en/

Paypal

If you use Paypal for payment, identify your public Paypal page. It's usually Paypal.me/yourusername. This is the page where your customers can enter a currency amount and transact their payment to you.

This is the URL you'll hyperlink in the VistaPrint Website Builder.

Now add a Title or Paragraph element to your webpage, and fill it with text to be hyperlinked, such as “Pay for your service using Paypal.”

Select that text and click the hyperlink button in the element toolbar.

Now select an External link, and paste in your public Paypal page URL.

Click Save Changes.

Click Publish to put your latest changes live on the web.

You can do the same thing to hyperlink a Button element anywhere on your website too. Click here for more information on creating hyperlinks.

Other payment methods

For other forms of payment, we strongly recommend that you offer your customers multiple quick and easy paths to directly get to your preferred payment method using hyperlinks in buttons and/or hyperlinked text. See the notes about Paypal above for steps to hyperlink you text and buttons to other payment methods.

Advanced button customization

If you want to personalize how your appointment booking button appears, use the following code.

<style>  

.style-my-text {
  text-decoration: none;
  color: white;
  font-size: 16px;  
}  
.give-my-button-color {
  background-color: Green;    
}  
.set-the-width-of-my-button {
    width: 200px;
} 
.make-space-around-my-button-text{
    padding: 15px;
}  

.center-my-button {
  margin: 0 auto;
}  

.left-align-my-button {
  margin-left: 0;
  margin-right: auto;
}  

.right-align-my-button {
  margin-right: 0;
  margin-left: auto;
}  

.add-additional-styles-to-my-button {
  border-radius: 3px;
  display: flex;
  justify-content: center;
  }

</style>

<div class = 
     "set-the-width-of-my-button 
      give-my-button-color 
      center-my-button 
      make-space-around-my-button-text 
      add-additional-styles-to-my-button" 
role="button" >

<script id="setmore_script" type="text/javascript" src="https://my.setmore.com/webapp/js/src/others/setmore_iframe.js"></script><a id="Setmore_button_iframe" class="style-my-text" href="https://my.setmore.com/bookingpage/INSERT YOUR BOOKING PAGE HERE">Book an Appointment</a></div>