Difference between revisions of "WordPress integration"

From SimplyBook.me
 
(9 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
|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
 
|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
 
}}
 
}}
−
 
−
 
  
 
__FORCETOC__
 
__FORCETOC__
−
=[https://wordpress.org/plugins/simplybookme-online-appointment-scheduling-widget-and-booking-system/ Wordpress Plugin]=
 
−
<br><br>
 
−
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Please note!''' Wordpress SimplyBook.me plugin may not work with some custom themes of WordPress and some specific plugins. If you installed the plugin and all the data is correct but the page does not show up, please try inserting widget (option #2)</span>
 
−
<br><br>
 
  
−
:1. Search for <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[https://wordpress.org/plugins/simplybookme-online-appointment-scheduling-widget-and-booking-system/ Simplybook WordPress plugin]</span> in the list of plugins in the 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>
−
[[File:Install plugin.png | center]]
+
: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>
 
<br><br>
−
 
+
:2. Navigate to plugin <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings.</span>
−
:2. Go to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">WordPress plugin settings</span> and insert your company login to the corresponding box there. (the one in url of your admin page, e.g in the link <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">https://image.secure.simplybook.me/</span>, ''image'' is company name)
+
[[File:Wp plugin settings new.png|1200px|center|link=https://help.simplybook.me/images/2/25/Wp_plugin_settings_new.png]]
−
 
 
−
[[File:Wp plugin settings 4.0.png | center]]
 
 
<br><br>
 
<br><br>
−
:3. Select the theme, timeline and colors for the client view.
+
:3. If you already have an account with SimplyBook.me please choose the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">login</span> option there.<br>
 +
:If you have not created it yet, simply click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">registration</span> option and sign up following the suggested steps.
 +
[[File:Wp plugin login or register upd.png|1200px|center|link=https://help.simplybook.me/images/3/38/Wp_plugin_login_or_register_upd.png]]
 
<br><br>
 
<br><br>
−
:4. In your WordPress admin site navigate to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Pages</span> and create a new page specifically for bookings (you can also add it to the already existing page if you wish, the process is the same). Then, paste <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">[simplybook]</span> tag into that page.
+
: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]]
−
[[File:Shortcode in wp admin.png | center]]
 
 
<br><br>
 
<br><br>
−
:5. Example of WordPress plugin (may look different depending on your WP theme and SimplyBook.me settings). You can also use <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Custom_Features#Custom_CSS | CSS custom feature]]</span> to adjust the look of the plugin to the design of your website.  
+
: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.
−
<span style="background-color:#fef3de; padding:5px; border-radius:5px;">Select location</span>
+
[[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]]
−
 
 
−
[[File:Select location.png | center]]
 
 
<br><br>
 
<br><br>
−
<span style="background-color:#fef3de; padding:5px; border-radius:5px;">Select service</span>
+
:6. Adjust the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">design</span> settings for your widget.<br>
−
 
+
:You can also select some predefined options for the plugin if necessary.
−
[[File:Select service.png | center]]
+
[[File:Wp adjust plugin design.png|1200px|center|link=https://help.simplybook.me/images/6/6e/Wp_adjust_plugin_design.png]]
 
<br><br>
 
<br><br>
−
<span style="background-color:#fef3de; padding:5px; border-radius:5px;">Select date and time</span>
+
:7. Scroll the page to the bottom, save settings and navigate to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Pages</span> section of your WordPress interface.
−
 
+
[[File:Save wp design.png|1200px|center|link=https://help.simplybook.me/images/0/06/Save_wp_design.png]]
−
[[File:Select date and time.png | center]]
 
−
<br><br>
 
−
<span style="background-color:#fef3de; padding:5px; border-radius:5px;">Fill in the details</span>
 
−
 
 
−
[[File:Fill-in details.png | center]]
 
−
<br><br>
 
−
;Errors while setting up the plugin.
 
−
If you got the error <span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">"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."</span>
 
−
* 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, please contact our support and we will try to help you.
 
−
 
 
−
 
 
−
If you receive the message that <span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">Fatal error occurred when installing the plugin</span> most likely you will need to update your PHP version, the preferable version is 5.3 and higher.
 
 
<br><br>
 
<br><br>
−
=Widget=
+
:Create a new page and add a HTML block there. Paste <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">[simplybook_widget]</span> tag to its body and publish the page.
 +
[[File:Paste tag to page.png|1200px|center|link=https://help.simplybook.me/images/7/7e/Paste_tag_to_page.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>
  
−
: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;">Bookings on Webpage or Facebook</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking widget for your own website</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code.</span>
+
[[File:Booking widgets path new navigation.png|1200px| center]]
−
 
 
−
[[File:Widget code path.png | center]]
 
 
<br><br>
 
<br><br>
−
 
+
[[File:Iframe widget creation new navigation.png|1200px| center]]
−
[[File:Generate widget code.png| center]]
 
 
<br><br>
 
<br><br>
  
 
[[File:Widget code copy.png | center]]
 
[[File:Widget code copy.png | center]]
 
<br><br>
 
<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 "+" icon.
+
: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]]
 
[[File:Creating new page wp.png | center]]
−
<br><br>
+
<br><br>
−
:3. Search for HTML option.
+
:3. Search for <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">HTML</span> option.
 
[[File:Add html editor.png | center]]
 
[[File:Add html editor.png | center]]
 
<br><br>
 
<br><br>
Line 77: Line 55:
 
[[File:Paste the code.png | center]]
 
[[File:Paste the code.png | center]]
 
<br><br>
 
<br><br>
−
:5. Publish your changes
+
:5. Publish your changes.
 
<br><br>
 
<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).
+
:<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:Wp widget new.png| center]]
+
[[File:Wp select location.png| center]]
−
<br><br>
 
−
=How to translate old version of WordPress plugin to your language=
 
 
<br><br>
 
<br><br>
−
:1) download plugin zip file from https://wordpress.org/plugins/simplybookme-online-appointment-scheduling-widget-and-booking-system/
 
−
:2) uncompress this file
 
−
:3) go to "/langs" folder
 
−
:4) copy simplybook_me-en_US.po file with name "simplybook_me-sl_SL.po"
 
−
:5) download PoEdit (program) https://poedit.net/ (Free)
 
−
:6) open simplybook_me-sl_SL.po with PoEdit
 
−
:7) save and update zip file with your translation file (''Please note!'' Zip file structure should not be changed)
 
−
:8) go to your WordPress dashboard, Plugins page and click on "Add new" at the top, then choose "Upload Plugin" and upload your zip file there.<br><br>
 
−
If it does not work you need to apply translations via FTP - if you do not know how to do it please contact your web developer.
 
 
<br><br>
 
<br><br>

Latest revision as of 07:33, 9 April 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 login option there.
If you have not created it yet, simply click on registration option and sign up following the suggested steps.
Wp plugin login or register upd.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. Adjust the design settings for your widget.
You can also select some predefined options for the plugin if necessary.
Wp adjust plugin design.png



7. Scroll the page to the bottom, save settings and navigate to Pages section of your WordPress interface.
Save wp design.png



Create a new page and add a HTML block there. Paste [simplybook_widget] tag to its body and publish the page.
Paste tag to page.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=10169"