Help is here.

Online booking appointment

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
NOTE: Although VistaPrint is not affiliated with Setmore, we recommend its easy-to-use service and zero cost basic subscription. You're free to use other online appointment booking service providers that offer an embed code that will work with your VistaPrint site. 

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.

Apps_intergration_booking_widget_1000px.gif

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).

Booking_widget_settings_embed_code_1000px.gif

 

Create space on your website for appointment booking

Check out professionally designed website templates here.

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).

Adding_HTML_pip_1000px.gif

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. 

customhtml_warning.jpg

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.

customhtml_clickplaceholder.jpg

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.

appointments_embedcode.jpg

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

appointments_pastecode.jpg

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

appointments_button.jpg

Click Publish.

See all the steps here:

Adding_setmore_code_to_HTML_pip_900px.gif

 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.

TIP: in a separate tab, go to your live website online and try out your new online appointment book. Or ask a friend! When your tests are successful, you can be confident that this will work for your customers.

 

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.

appointments_addpage.jpg

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

appointments_appointmentspage.jpg

 

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.

appointments_paypaltext.jpg

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.

P.S.: If you are a nonprofit organization, you can use the Donate with Paypal button offered in the VistaPrint Website Builder.

P.P.S.: If you have a Premium subscription to the VistaPrint Website Builder, you can use the built-in Paypal purchase button. To learn more about using Paypal, click here.


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.

Never collect your customers' credit card information via email or via form submission. Having someone’s payment information recorded directly in an email or in a form submission is dangerous for you and for your customer as it exposes you as a target for hackers. Avoid identity theft and reduce your risk of hacking by using payment processors with bank-level security. VistaPrint’s Terms of Use also prohibit you from collecting personally identifiable information on your customers using our tools. Only use professional payment processors.

 

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>