WordPress integration: Difference between revisions

From SimplyBook.me
No edit summary
 
(36 intermediate revisions by the same user not shown)
Line 1: Line 1:
<languages/>
<translate>
<!--T:1-->
{{#seo:
|title=WordPress plugin - SimplyBook.me
|description=Integrate SimplyBook.me with WordPress for effortless online bookings. Set it up easily with our comprehensive guide!
|titlemode=append
|keywords=faq, frequently asked questions, booking software, appointment system questions, appointments online, calendar software, booking system, booking calendar, scheduling software, online appointment scheduling, online scheduling, plugin, wordpress integration, widget, website widget, wordpress plugin
}}
</translate>
<translate>


==1. With the help of our [https://wordpress.org/plugins/simplybookme-online-appointment-scheduling-widget-and-booking-system/ '''Wordpress plugin''']==
<!--T:2-->
__FORCETOC__


;Installation
<!--T:3-->
: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).
==With the help of WordPress plugin==
:1. In your WordPress admin interface navigate to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Plugins</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Add new Plugin</span> and search for '''Simplybook'''.<br>
:Install it and Activate.
[[File:Add simplybook to wp new.png|1200px|center|link=https://help.simplybook.me/images/4/47/Add_simplybook_to_wp_new.png]]
<br><br>
[[File:Activate new wp plugin.png|1200px|center|link=https://help.simplybook.me/images/3/32/Activate_new_wp_plugin.png]]
<br><br>
:2. Navigate to plugin <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings.</span>
<br><br>
</translate>
<translate>
<!--T:4-->
:3. If you already have an account with SimplyBook.me please choose the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Sign in here</span> option there.<br>
:If you have not created it yet, simply follow the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Create free account</span> steps.
[[File:Create account or sign up in wp.png|1200px|center|link=https://help.simplybook.me/images/2/2f/Create_account_or_sign_up_in_wp.png]]
<br><br>
:4. After short registration/login process you will get to your <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Dashboard</span> overview.
[[File:Wp new dashboard overview.png|1200px|center|link=https://help.simplybook.me/images/a/ab/Wp_new_dashboard_overview.png]]
<br><br>
:5. Navigate to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> tab and choose "Services" or "Providers" tab to see the list of existing ones in your account and easily navigate to manage them or add more.
[[File:Wp new see the list of services and providers.png|1200px|center|link=https://help.simplybook.me/images/9/97/Wp_new_see_the_list_of_services_and_providers.png]]
</translate>
<translate>
<!--T:5-->
:6. Switch to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Design</span> tab.<br>
:Adjust the look for your widget.<br>
:You can select the preferable calendar layout, adjust the colors and much more.
[[File:Wp new design settings path.png|1200px|center|link=https://help.simplybook.me/images/b/ba/Wp_new_design_settings_path.png]]
<br><br>
:7. Save your settings and navigate to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Pages</span> tab of the WordPress interface.<br>
:Open the page you would like to add the booking functionality to or add a new one.
:Click on "+" button there and look for '''Simplybook''' option. Click on it to add to the page. Save the page.
:After the website is published the clients will be able to book your services.
[[File:Wp new add plugin to page.png|1200px|center|link=https://help.simplybook.me/images/7/7e/Wp_new_add_plugin_to_page.png]]
<br><br>
</translate>
<translate>
<!--T:6-->
:8. (optional) If you need to have the booking functionality only for some service/provider/location/category you can use <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Edit predefined parameters</span> option there.
[[File:Wp edit predefined path.png|1200px|center|link=https://help.simplybook.me/images/d/d7/Wp_edit_predefined_path.png]]
<br><br>
:And select the necessary one(s) in the popup that appears.
[[File:Wp new predefined options.png|1200px|center|link=https://help.simplybook.me/images/7/70/Wp_new_predefined_options.png]]
<br><br>
:9. As alternative way to add the functionality to the page you can use the shortcode.
:Copy the calendar shortcode from the plugin <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> page.
[[File:Wp new shortcode for widget.png|1200px|center|link=https://help.simplybook.me/images/e/e5/Wp_new_shortcode_for_widget.png]]
<br><br>
:And simply paste it to the HTML part on the desired page
[[File:Wp new paste shortcode.png|1200px|center|link=https://help.simplybook.me/images/0/0a/Wp_new_paste_shortcode.png]]
<br><br>
</translate>
<translate>
<!--T:7-->
==As a Widget==
:1. Please copy the code from <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking widgets settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">iFrame widget</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code.</span>


[[File:Wp plugin search.png | center]]
<!--T:8-->
[[File:Booking widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]
<br><br>
[[File:Booking widget design path redesigned.png|1200px | center|link=https://help.simplybook.me/images/3/37/Booking_widget_design_path_redesigned.png]]
<br><br>
[[File:Copy widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png ]]
<br><br>
:2. Go to your WordPress admn side and create a new page or navigate to already created one, where you plan to add the widget. Click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">+</span> icon.
[[File:Creating new page wp.png | center]]
<br><br>
:3. Search for <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">HTML</span> option.
[[File:Add html editor.png | center]]
<br><br>
:4. Paste the previously copied code.
[[File:Paste the code.png | center]]
<br><br>
:5. Publish your changes.
<br><br>


</translate>
<translate>
<!--T:9-->
:<span style="background-color:#fef3de; padding:5px; border-radius:5px;">Example</span> (may look different depending on your WP theme and [https://simplybook.me/ SimplyBook.me] theme and settings).


: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.
<!--T:10-->
[[File:Wp select location.png| center]]
<br><br>
<br><br>
==AI Voice Booking==


 
With the AI Voice Booking widget, you can easily place an interactive AI widget button anywhere on your client’s website. Simply enable your feature on SimplyBook.me side, insert the widget code into an HTML section in your website builder and visitors will be able to book appointments just by messaging or speaking to the AI directly on the site. Please, check the [[Special:MyLanguage/AI Voice Booking|tutorial]] to setup the integration.
[[File:Get free account.png | center]]
</translate>
 
 
:3. Enable API plugin in the plugin section of SimplyBook.me admin page in the section "For developers" by pressing green button "enable near it.
 
[[File:Enable api plugin.png| center]]
 
 
After you enabled the plugin, please press "settings",
 
 
[[File:Api plugin settings.png| center]]
 
 
there you will see 2 keys: Api public key (API Key) and API secret key.
 
 
[[File:Api plugin keys.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.
 
===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:Widget integration for your own website.png | center]]
 
 
[[File:Widget settings 2.png | center]]
 
 
[[File:Widget code 3.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]]

Latest revision as of 08:33, 3 December 2025


With the help of WordPress plugin

1. In your WordPress admin interface navigate to Plugins -> Add new Plugin and search for Simplybook.
Install it and Activate.





2. Navigate to plugin Settings.



3. If you already have an account with SimplyBook.me please choose the Sign in here option there.
If you have not created it yet, simply follow the Create free account steps.



4. After short registration/login process you will get to your Dashboard overview.



5. Navigate to Settings tab and choose "Services" or "Providers" tab to see the list of existing ones in your account and easily navigate to manage them or add more.
6. Switch to Design tab.
Adjust the look for your widget.
You can select the preferable calendar layout, adjust the colors and much more.



7. Save your settings and navigate to Pages tab of the WordPress interface.
Open the page you would like to add the booking functionality to or add a new one.
Click on "+" button there and look for Simplybook option. Click on it to add to the page. Save the page.
After the website is published the clients will be able to book your services.



8. (optional) If you need to have the booking functionality only for some service/provider/location/category you can use Edit predefined parameters option there.



And select the necessary one(s) in the popup that appears.



9. As alternative way to add the functionality to the page you can use the shortcode.
Copy the calendar shortcode from the plugin Settings page.



And simply paste it to the HTML part on the desired page



As a Widget

1. Please copy the code from Settings -> Booking widgets settings -> iFrame widget -> Get widget code.







2. Go to your WordPress admn side and create a new page or navigate to already created one, where you plan to add the widget. Click on + icon.



3. Search for HTML option.



4. Paste the previously copied code.



5. Publish your changes.



Example (may look different depending on your WP theme and SimplyBook.me theme and settings).





AI Voice Booking

With the AI Voice Booking widget, you can easily place an interactive AI widget button anywhere on your client’s website. Simply enable your feature on SimplyBook.me side, insert the widget code into an HTML section in your website builder and visitors will be able to book appointments just by messaging or speaking to the AI directly on the site. Please, check the tutorial to setup the integration.