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 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 will use on your Vistaprint site (click image to enlarge).
Create space in your website for appointment booking
NOTE: If you don’t have a website yet, you can start a 30 day free trial of the Vistaprint Website Builder now. In the free trial you can design and preview your website. Heads up: you will need to purchase a subscription in order to publish your site to the web. Check out professionally designed website templates and start your trial 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 detail.
Once you've identified where you will to link to your online appointment book, hover your mouse to Add Element. Click the green plus sign to launch the Elements menu and select the HTML element from the Popular section (it is also included under Extras).
Before you can add the element to your site, you'll see 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:
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.
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.
This page contains:
- Site header
- Title & HTML block: This is where you will add your button embed code
- Title & paragraph block: This is where you can add additional information for your customers and clients, such as payment.
- Site footer
Collect payment and tips
Small businesses are making revenue by charging for the 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.
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 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 is seamless.
To learn more about the Setmore’s payment integration options, go here: https://support.setmore.com/en/collections/87087-payments
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/
If you use Paypal for payment, identify your public Paypal page. It is 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 will 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 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.
Advanced button customization
If you want to personalize how your appointment booking button appears, use the following code.