Difference between revisions of "WordPress integration"

From SimplyBook.me
 
(37 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
1. With the help of our [https://wordpress.org/plugins/simplybookme-online-appointment-scheduling-widget-and-booking-system/ '''Wordpress plugin''']
+
{{#seo:
 +
|title=WordPress plugin - SimplyBook.me
 +
|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
 +
}}
  
−
;Installation
+
__FORCETOC__
−
: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]]
+
==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 sb plugin to wp new.png|1200px|center|link=https://help.simplybook.me/images/c/c5/Add_sb_plugin_to_wp_new.png]]
 +
<br><br>
 +
:2. Navigate to plugin <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings.</span>
 +
[[File:Wp plugin settings new.png|1200px|center|link=https://help.simplybook.me/images/2/25/Wp_plugin_settings_new.png]]
 +
<br><br>
 +
: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 click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Create free account</span> option and sign up following the suggested steps.
 +
[[File:Wordpress new login or register.png|1200px|center|link=https://help.simplybook.me/images/9/95/Wordpress_new_login_or_register.png]]
 +
<br><br>
 +
:4. Log in providing <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">company login</span>, <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">user login</span> and <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">password.</span>
 +
[[File:Sb login page.png|1200px|center|link=https://help.simplybook.me/images/f/f3/Sb_login_page.png]]
 +
<br><br>
 +
:5. <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Confirm the connection</span> between SimplyBook.me account and your WordPress system.
 +
:You will get the one-time code to finalise the connection.
 +
[[File:Sb confirm connection to wp new.png|1200px|center|link=https://help.simplybook.me/images/c/c1/Sb_confirm_connection_to_wp_new.png]]
 +
<br><br>
 +
:6. Switch to '''Design''' tab.<br>
 +
:Adjust the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">design</span> settings for your widget.<br>
 +
:You can select the preferance calendar layout, change the theme, adjust the colors and many more.
 +
:Here you can also select some predefined options for the plugin if necessary.
 +
[[File:Wordpress design settings overview.png|1200px|center|link=https://help.simplybook.me/images/5/54/Wordpress_design_settings_overview.png]]
 +
<br><br>
 +
:7. Save your settings and navigate to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">General</span> tab of the plugin interface.
 +
[[File:Wordpress plugin general tab page options.png|1200px|center|link=https://help.simplybook.me/images/d/d6/Wordpress_plugin_general_tab_page_options.png]]
 +
<br><br>
 +
:The page with the booking widget is already pre-created for you - you can edit, remove or keep it as it is.<br>
 +
:Or you can create a new page and paste <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">[simplybook_widget]</span> tag to its body and publish the page.<br><br>
 +
:From here you can also easily access various pages on SimplyBook.me side to add or edit your services and providers, enable some additional functionality for the booking process with the Custom features.
 +
[[File:Wordress plugin general tab useful links.png|1200px|center|link=https://help.simplybook.me/images/7/7d/Wordress_plugin_general_tab_useful_links.png]]
 +
<br><br><br><br>
 +
==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:Booking widgets path new navigation.png|1200px| center]]
 +
<br><br>
 +
[[File:Iframe widget creation new navigation.png|1200px| center]]
 +
<br><br>
  
−
: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:Widget code copy.png | center]]
 +
<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>
  
 +
:<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).
  
−
[[File:Get free account.png | center]]
+
[[File:Wp select location.png| center]]
−
 
+
<br><br>
−
 
+
<br><br>
−
: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.
 
−
 
 
−
 
 
−
[[File:Example wp plugin.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]]
 
−
 
 
−
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 10:35, 3 October 2024


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.
Add sb plugin to wp new.png



2. Navigate to plugin Settings.
Wp plugin settings new.png



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 click on Create free account option and sign up following the suggested steps.
Wordpress new login or register.png



4. Log in providing company login, user login and password.
Sb login page.png



5. Confirm the connection between SimplyBook.me account and your WordPress system.
You will get the one-time code to finalise the connection.
Sb confirm connection to wp new.png



6. Switch to Design tab.
Adjust the design settings for your widget.
You can select the preferance calendar layout, change the theme, adjust the colors and many more.
Here you can also select some predefined options for the plugin if necessary.
Wordpress design settings overview.png



7. Save your settings and navigate to General tab of the plugin interface.
Wordpress plugin general tab page options.png



The page with the booking widget is already pre-created for you - you can edit, remove or keep it as it is.
Or you can create a new page and paste [simplybook_widget] tag to its body and publish the page.

From here you can also easily access various pages on SimplyBook.me side to add or edit your services and providers, enable some additional functionality for the booking process with the Custom features.
Wordress plugin general tab useful links.png





As a Widget

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



Iframe widget creation new navigation.png



Widget code copy.png



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.
Creating new page wp.png



3. Search for HTML option.
Add html editor.png



4. Paste the previously copied code.
Paste the code.png



5. Publish your changes.



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





Retrieved from "https://help.simplybook.me/index.php?title=WordPress_integration&oldid=11132"