Difference between revisions of "Integration"

From SimplyBook.me
 
(25 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{#seo:
 
{{#seo:
|title=Frequently Asked Questions about Integration Of Popular Appointment Booking System SimplyBook.me to Customer's Website
+
|title=Integration - SimplyBook.me
 
|titlemode=append
 
|titlemode=append
|keywords=faq, frequently asked questions, online scheduling, free scheduling software, online booking system, online calendar, employee scheduling software, schedule, scheduling software, scheduling app, booking calendar, calendar software
+
|keywords=faq, frequently asked questions, online scheduling, free scheduling software, online booking system, online calendar, employee scheduling software, schedule, scheduling software, scheduling app, booking calendar, calendar software
 
}}
 
}}
  
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
+
*<div class="article">[[SBPay.me | SBPay.me]]</span></div>
<span class="qa">[[Widgets for your own website]]</span>
+
*<div class="article">[[Widgets for your own website]]</div>
<div class="mw-collapsible-content">
+
*<div class="article">[https://simplydemowidgets.mozello.com/ Widget examples]</div>
[[Widgets_for_your_own_website#iFrame_Widget | iFrame widget]]
+
*<div class="article">[[Bookings on Facebook |Bookings on Facebook and Instagram]]</div>
 
+
*<div class="article">[[WordPress_integration | WordPress integration]]</div>
[[Widgets_for_your_own_website#Booking_Button_Widget | Booking Button Widget]]
+
*<div class="article">[[Bookings on Facebook | Facebook CTA button and widget]]</div>
 
+
*<div class="article">[[Other Integrations]]</div>
[[Widgets_for_your_own_website#Booking_and_Contact_Button_Widget | Booking and Contact widget]]
+
*<div class="article">[[Own domain | Custom Domain]]</div>
</div>
 
<br/>
 
</div>
 
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
 
<span class="qa">[http://appointmentscheduleronline.weebly.com/widgets.html/ Widget examples]</span>
 
<div class="mw-collapsible-content">
 
Please check widget examples [http://appointmentscheduleronline.weebly.com/widgets.html/ here]
 
</div>
 
<br/>
 
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
 
<span class="qa">[[Bookings on Facebook]]</span>
 
<div class="mw-collapsible-content">
 
=How can I add booking functionality to my Facebook fan page?=
 
:You can add [https://simplybook.me SimplyBook] functionality to Facebook fan page in Settings//Bookings on Webpage or Facebook//Facebook booking widget//Save settings and connect facebook page// choose the page to attach [https://simplybook.me Simplybook] to.
 
 
 
[[File:Facebookwidgetsettings.png | center]]
 
 
 
 
 
=I attached Facebook app but cannot find it=
 
It may be in the tab "More" in the menu of the page under photo. You can also press More//Manage tabs and move [https://simplybook.me simplybook] to another main bar to make it more visible for clients.
 
 
 
[[File:Facebook_more.PNG | center]]
 
 
 
 
 
=[https://simplybook.me Simplybook ] app is listed in "More" tab on my Facebook fan page, can I move it to make it more noticeable?=
 
 
 
You can press Settings//Edit page and make [https://simplybook.me SimplyBook.me] more visible for clients by dragging and dropping to  it higher in the list.
 
<br><br>
 
[[File:Facebook reorder.png | center]]
 
<br><br>
 
=How to remove Facebook widget from my Facebook page?=
 
<br>
 
On your Facebook fan page go to Settings (upper bar)//Edit page//SimpllyBook.me appointments//Settings//press "Off" near [https://simplybook.me Simplybook] app to remove this tab and save settings.
 
<br><br>
 
[[File:Remove tab Facebook.png | center]]
 
<br><br>
 
 
 
=Can I change the title of the tab on my Facebook fan page from "[https://simplybook.me Simplybook.me appointments]" to something else?=
 
Yes, on your Facebook fan page go to Settings (upper bar)//Edit page//SimpllyBook.me appointments//Settings//Edit settings//Custom tab name.
 
<br>
 
[[File:Facebook rename tab 2.png | center]]
 
<br><br>
 
[[File:Rename tab.png | center]]
 
<br><br>
 
 
 
=Facebook widget is not visible from mobiles=
 
:Unfortunately, Facebook does not show third-party apps from mobiles. Your clients need to access desktop version to book from Facebook.
 
 
 
 
 
=I cannot change the email when book from Facebook=
 
:When you use Facebook widget, the [https://simplybook.me system] perceives a customer as Facebook user and uses his/her data to fill in the details. Thus, by default it uses email under which Facebook is registered. Unfortunately, it is not in our competency to change this, you can try contacting Facebook support to clarify this issue.
 
 
 
</div>
 
<br/>
 
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
 
<span class="qa">[[WordPress plugin |WordPress integration]]</span>
 
<div class="mw-collapsible-content">
 
1. With the help of our [https://wordpress.org/plugins/simplybookme-online-appointment-scheduling-widget-and-booking-system/ '''Wordpress plugin''']
 
 
 
;Installation
 
:1. Search for [https://wordpress.org/plugins/simplybookme-online-appointment-scheduling-widget-and-booking-system/ Simplybook WordPress plugin] in the list of plugins of WP catalogue and add it to your website (it is called Online Appointment Scheduling Widget and Booking System).
 
 
 
[[File:Wp plugin search.png | center]]
 
 
 
 
 
:2. If you don't have account with us yet, please register on SimplyBook.me (you can register [https://simplybook.me/company/ here]), or visit our website and press big button [https://simplybook.me/company/ “Get Free Account”)]. If you already have account, please log into it.
 
 
 
 
 
[[File:Get free account2.png| center]]
 
 
 
 
 
:3. Enable API Custom Feature in the Custom Features section of SimplyBook.me admin page in the section "For developers" by pressing green button "enable near it.
 
 
 
[[File:Api enable.png| center]]
 
 
 
 
 
After you enabled the Custom Feature, please press "settings",
 
 
 
 
 
[[File:Api settings.png| center]]
 
 
 
 
 
there you will see 2 keys: Api public key (API Key) and API secret key.
 
 
 
 
 
[[File:Apikeys.png | center]]
 
 
 
 
 
 
 
:4. Insert those keys into the settings of Simplybook plugin in your WordPress account.
 
:5. Insert your company login (the one in url of your admin page, e.g in the link https://image.secure.simplybook.me/, image is company name )
 
 
 
 
 
[[File:Wp plugin settings.png | center]]
 
 
 
 
 
 
 
:6. In your WordPress admin site navigate to "Pages" and create a new page specifically for bookings (you can also add it to already existing page if you wish, the process is the same). Then, paste '[simplybook]' tag in that page.
 
 
 
 
 
[[File:Shortcode in wp admin.png | center]]
 
 
 
:7. Example of WordPress plugin (may look different depending on your WP theme and SimplyBook.me settings). You can also use CSS option in the settings of SimplyBook WP plugin to adjust the look of the plugin to the design of your website.
 
 
 
Select location
 
 
 
[[File:Example wp plugin.png | center]]
 
 
 
Select service
 
 
 
[[File:Example wp plugin choose service.png| center]]
 
 
 
Select date and time
 
 
 
[[File:Example wp plugin select time and date.png | center]]
 
 
 
Fill in the details
 
 
 
[[File:Example wp plugin details.png | center]]
 
 
 
;Error while setting up the widget.
 
If you got the error "''Seems the method cannot be found on your server. Possible reasons may include: PHP option 'allow_url_fopen' is not enabled, PHP CURL is not enabled. Please ask your hoster for support regarding absence of required methods.''"
 
* Please check if your PHP has the necessary methods (allow_url_fopen and  PHP CURL) on.
 
* To check this, you can install [https://wordpress.org/plugins/php-settings/ PHP Settings plugin].
 
*After you have checked and the necessary methods are Off, please contact your hosting provider and request activating them.
 
*If those methods are On, there may be another reason that prevents [https://simplybook.me/ SimplyBook.me] plugin from displaying on your page.
 
 
 
if you receive the message that ''Fatal error occurred when installing the plugin'' most likely you will need to update your PHP version, the preferable version is 5.3 and higher.
 
 
 
 
 
 
 
2. As a '''Widget''':
 
 
 
Please copy the code from Settings//Bookings on Webpage or Facebook//Booking widget for your own website//Save settings and Get code.
 
 
 
[[File:Bookingwidgetsetting.png | center]]
 
 
 
 
 
[[File:Widgetsettings.png| center]]
 
 
 
 
 
[[File:Widgetcode.png | center]]
 
 
 
Then, insert the iFrame code to the page you want to show the widget on in WordPress admin page//Pages//Add new or edit existing one//paste the code and press "publish/update".
 
 
 
 
 
[[File:Wp iframe.png | center]]
 
 
 
 
 
''Example'''' (may look different depending on your WP theme and [https://simplybook.me/ SimplyBook.me] theme and settings)''
 
 
 
[[File:Wp iframe example.png| center]]
 
 
 
 
 
</div>
 
<br/>
 
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
 
<span class="qa">[[Zapier_integration| Zapier]]</span>
 
<div class="mw-collapsible-content">
 
[[Zapier_integration | Zapier integration]]
 
 
 
[[Using_Zapier.com| How to send copy of confirmation email (gmail integration).]]
 
 
 
[[Email_notifications_with_Zapier | How to send email confirmations to several emails]]
 
 
 
[http://appointmentschedulingnews.com/zap-a-new-functionality-to-simplybook-me/ Simplybook and MailChimp integration]
 
 
 
[http://appointmentschedulingnews.com/simplybook-me-and-zapier-integration/ Other available zaps]
 
 
 
</div>
 
</div>
 
<br/>
 
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
 
<span class="qa">[[Joomla integration]]</span>
 
<div class="mw-collapsible-content">
 
:1. Take the iFrame code of your booking page in Settings//Bookings on Webpage or Facebook//Booking widget for your website//Save settings and Get code.
 
 
 
[[File:Bookingwidgetsetting.png | center]]
 
<br><br>
 
[[File:Widget settings new.png | center]]
 
<br><br>
 
[[File:New iframe code.png | center]]
 
<br><br>
 
:2. Now go to Content>Articles check the box of the entry you want to insert the booking functionality into and click 'edit'. Then insert the widget code to the HTML code <body> of your website on the page where you need to display the booking functionality.
 
[[File:Joomla widget code adding.png | center]]
 
<br><br>
 
:3. Save settings and publish the page.
 
<br><br>
 
</div>
 
</div>
 
<br/>
 
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
 
<span class="qa">[[HTML button]]</span>
 
<div class="mw-collapsible-content">
 
[[File:Book_1_new.jpg|left]]
 
 
 
Sometimes, websites (WordPress.com in particular) do not support inserting HTML Javascript code we use for our iFrame and button widgets. Then it can be useful to use a simple HTML button code to get your clients attention to go to your booking site at [https://simplybook.me/ SimplyBook.me] and make the appointment. Here is a simple code you can insert on your site or into your emails to link to your booking site at [https://simplybook.me/ SimplyBook.me]
 
 
 
<a href="//image.simplybook.me/v2" target="_blank"><img src="https://appointmentbookingsystem.files.wordpress.com/2015/11/book_button.jpg?w=660″ alt="Booking button" width="200" height="200" /></a>
 
 
 
Now let’s look at the code closer and see its components and how it can be adjusted to your company.
 
 
 
'''What you can change:'''
 
:1. ''image.simplybook.me/v2'' – it is the link to your booking page. It can be found when you press “My booking website” in the upper right corner of your admin [https://simplybook.me/ SimplyBook.me] page. You need to insert your company name instead of “image”.
 
:2. ''https://appointmentbookingsystem.files.wordpress.com/2015/11/book-now-button-1.png?w=660''  – this is the link to the image of “Book now” button. You can choose the image that suits your website design.
 
:3. ''alt=”Booking button”''  – this is the alternate text for an image, if the image cannot be displayed. You can change the text “Booking button” to “Book now”, “Book here”, etc.
 
:4. ''width=”200″ height=”200″''  You can insert custom size of the image with the help of these functions.
 
5. Please note that all the other signs, symbols and spaces are very important for the proper functioning of the code.
 
 
 
'''[https://appointmentbookingsystem.wordpress.com/ Tutorial with pictures and Booking Button gallery]'''
 
</div>
 
</div>
 
<br/>
 
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
 
<span class="qa">[[Wix integration]]</span>
 
<div class="mw-collapsible-content">
 
If you use Wix, and if you want to add the possibility of bookings to your website we have the right solution for you!
 
 
 
Our iFrame widget allows you to connect the Wix website with [https://simplybook.me SimplyBook.com] and let your clients book right from the website both from their PC or from their mobile devices. This solution will make your booking process more convenient and easy.
 
 
 
To do this, please  follow these simple steps:
 
 
 
:1. Go to '''Wix App Store'''.
 
 
 
[[File:Wix app store.jpg | center]]
 
<br><br>
 
:2. Enter “'''HTML'''” in the Search apps field.
 
[[File:Html plugin.jpg | center]]
 
<br><br>
 
:3. Select “'''HTML iFrame/Embed'''”  plugin.
 
[[File:Html iframe.jpg | center]]
 
<br><br>
 
:4. Switch to “'''HTML code'''” mode.
 
[[File:Html mode.jpg | center]]
 
<br><br>
 
:5. Go to your [https://simplybook.me SimplyBook.com] admin page. Go to '''Settings → Bookings on Webpage or Facebook → Booking widget for your own website'''.
 
[[File:Bookingwidgetsetting.png | center]]
 
<br><br>
 
:6. Press “'''Save Settings and get iFrame code'''”. Almost done, just few simple steps left!
 
[[File:Widgetsettings.png | center]]
 
<br><br>
 
:7. Copy the code you received.
 
[[File:Widgetcode.png | center]]
 
<br><br>
 
:8. Insert the code into Wix  iFrame plugin and Press “'''Update'''”. Remark that there is a “width=960” inside the code you paste into the HTML plugin. You may need to adjust the “960” number to some width that suits your website. You could try some numbers in the range from 500 to 960 and see what fits best. You can do these changes directly in the code that you pasted in the HTML plugin.
 
[[File:Insert code.jpg | center]]
 
<br><br>
 
Congratulations! Now you have [https://simplybook.me the best booking system] on your Wix website!
 
 
 
[[File:Widget example.jpg | center]]
 
 
 
</div>
 
</div>
 
<br/>
 
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
 
<span class="qa">[[Squarespace]]</span>
 
<div class="mw-collapsible-content">
 
[[File:Squarespace_new.jpg |left]]
 
 
 
'''iFrame widget:'''
 
:1. In your [https://simplybook.me/ Simplybook] admin page get the code in Settings//Bookings on Webpage or Facebook//Booking widget for your own website//Save settings and Get code.
 
:2. On your Squarespace account, choose the page where are planning to insert your booking calendar. We recommend using a new page in Main Navigation designed specifically for online booking. You can name it "Book Now", "Online Booking" or "Calendar." Open the page editor. Click an ''Insert Point'' and select ''Code'' from the Block Menu.
 
:3. Insert the code received in [https://simplybook.me/ Simplybook] admin page, to the ''Code'' box and click "Apply".
 
 
 
'''Booking button widget:'''
 
:1.  In your [https://simplybook.me/ Simplybook] admin page get the code in Settings//Bookings on Webpage or Facebook//Booking button widget for your website//Save settings and Get button code.
 
:2. In your Squarespace account go to Settings//Advanced//Code injection. ([https://support.squarespace.com/hc/en-us/articles/205815908 Squarespace instructions how to inject the code])
 
:3. Insert the code received in [https://simplybook.me/ Simplybook] admin page, to your Squarespace settings page.
 
</div>
 
<br/>
 
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
 
<span class="qa">[[Weebly]]</span>
 
<div class="mw-collapsible-content">
 
[[File:New_weebly.png |left]]
 
 
 
'''Booking button:'''
 
:Chose "Button" function in the building menu, change button name, choose style and insert the link to your booking page (Example: http://wikisimplybook.simplybook.me/)
 
'''iFrame Widget:'''
 
:1. Choose a page where you need to insert booking functionality or create separate page specifically for [https://simplybook.me/ SimplyBook].
 
​2. Choose "Embed Code" building function and drag it to the corresponding place.
 
:3. In your SimplyBook admin page go to Settings//Bookings on Webpage or Facebook//Booking widget for your own website//Save settings and get iFrame code.
 
:​4. Insert the code into the "Embed" area.
 
:5. Publish changes.
 
'''[http://appointmentscheduleronline.weebly.com/ Version with pictures]'''
 
'''[http://appointmentscheduleronline.weebly.com/simplybook.html Make Test Bookings and check widget examples]'''
 
</div>
 
<br/>
 
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
 
<span class="qa">[[Go Daddy]]</span>
 
<div class="mw-collapsible-content">
 
 
 
[[File:Godaddy-logo.png | left]]
 
:1. In your [https://simplybook.me/ Simplybook] admin page get the code in Settings//Bookings on Webpage or Facebook//Booking button widget for your website//Save settings and Get button code.
 
:2. In Go Daddy website, Log in to your Website Builder account.
 
:3. Click Design Your Pages.
 
:4. If necessary, from the Page menu, select the page you want to modify.
 
:5. Click Popular, and then drag and drop the Script icon over a Drop Zone. Drop Zones display on your Web pages when you hover over them.
 
:6. In the Enter JavaScript text box, delete the default scripting, and then enter code received in Settings//Bookings on Webpage or Facebook//Booking button widget for your website//Save settings and Get button code.
 
:7. Click OK.
 
:8. Click Publish in the upper right.
 
 
 
</div>
 
<br/>
 
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
 
<span class="qa">[[SITE123 integration | SITE123]]</span>
 
<div class="mw-collapsible-content">
 
Use SimplyBook.me at your SITE123 website to allow your customers to schedule an appointment on your website. <br>
 
Watch [https://www.youtube.com/watch?v=CzihU5K-DIo&feature=youtu.be this short video] and learn how to embed SimplyBook.me to your SITE123 website:
 
<br>
 
 
 
'''Step by step guide'''
 
<br>
 
:'''Creating the account and customization'''
 
1. If you have not created account with [https://simplybook.me/ SimplyBook.me] you can use [https://simplybook.it/default/registration this link] to create account for your company.<br>
 
2. Then please click on the Settings icon. It is located on the left side menu.
 
[[File:Settings page step.png | center]]
 
<br> <br>
 
3. Under “Bookings on Webpage or Facebook”, click on “Booking widget for your own website”.
 
[[File:Bookingwidgetsetting.png | center]]
 
<br> <br>
 
4. Now you have all the options needed to design the widget. Choose the sizes, types and modes. Choose the layout and colors that match your website.
 
[[File:Widget settings page.png | center]]
 
<br> <br>
 
5. You can see how the schedule widget will look like on your website. Adapt it to your taste.
 
[[File:Widget timeframe.png | center]]
 
<br> <br>
 
6. When you are done with the settings, click on “Save settings and Get iframe code”. It is on the top on the page, on the right.
 
[[File:Save settings widget.png |center]]
 
<br> <br>
 
 
 
 
 
:'''Installation'''
 
1. The next window shows a piece of code. Focus on the part that comes right before “simplybook.me”. Copy that part.
 
[[File:Code.png | center]]
 
<br> <br>
 
2. Go to [https://www.site123.com/ SITE123.com] and click on “START HERE” to sign up.
 
[[File:Site123.png | center]]
 
<br> <br>
 
3. Choose the category of website you want to create.
 
[[File:Site123 categories.png | center]]
 
<br> <br>
 
4. Enter the name of your website.
 
[[File:Website name.png | center]]
 
<br> <br>
 
5. Complete the sign up process by entering your full name, email and password or by using Facebook or Google to log in.
 
[[File:Sign up.png | center]]
 
<br> <br>
 
6. After your account at SITE123 is created open the website editor, go to “Pages” and click on “Add new page”
 
[[File:Add new page.png | center]]
 
<br> <br>
 
7. Open the App market, scroll down and find SimplyBook.me.
 
[[File:App.png | center]]
 
<br> <br>
 
8. On the Pages menu, you will see the SimplyBook.me module. Click on “Edit”.
 
[[File:Edit settings.png | center]]
 
<br> <br>
 
9. Now paste the selection into the “Application id” field. Then, hit save and your schedule will be immediately added to your website.
 
[[File:Add setting.png | center]]
 
<br> <br>
 
It's all done now! You have [https://simplybook.me great booking system] on your SITE123 website now!
 
</div>
 
 
 
 
 
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
 
<span class="qa">[[Video appointments with Gruveo]]</span>
 
<div class="mw-collapsible-content">
 
<br><br>
 
You can use very simple and brilliant method for fully anonymous phone or video appointments.
 
<br>This can often be necessary because once you have given the Skype id etc then you can be continued to be bothered by the same person without them having booked an appointment.
 
<br>
 
According to Gruveo.com, the appointments are encrypted over SSL. Wherever possible, they also use peer-to-peer technology where the data flows directly between the participants’ devices.
 
<br><br>
 
 
 
;How to use:
 
 
 
:1. Go to your admin interface, Settings // Email and SMS settings page
 
<nomobile>[[File:Email and sms settings path.png | center]]</nomobile>
 
<mobileonly>[[File:M email and sms settings path.png | center]]</mobileonly>
 
<br><br>
 
:2. Find the emails called:
 
:– Client's booking confirmation template;
 
:– New booking confirmation template for service provider;
 
:– Reminder template for clients;
 
:– Reminder to providers.
 
:3. Add the following text to each template: 
 
<pre>"Please press the following link at the time and date you booked to start the video appointment:  https://www.gruveo.com/#[code]“</pre>
 
:[code] variable will be automatically replaced by the unique booking code. Here is the example:
 
<nomobile>[[File:Test email gruveo.png | center]]</nomobile>
 
<mobileonly>[[File:M test email gruveo.png | center]]</mobileonly>
 
:4. Now when time for appointment comes, both you and client simply press the link to do the video appointment or telephone chat.
 
<br><br>
 
</div>
 
</div>
 

Latest revision as of 13:08, 6 September 2023