WordPress integration/en: Difference between revisions

Line 12:

:1. In your WordPress admin interface navigate to Plugins -> Add new Plugin and search for '''Simplybook'''.

: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]]

[[File:Add simplybook to wp new.png|1200px|center|link=https://help.simplybook.me/images/4/47/Add_simplybook_to_wp_new.png]]

[[File:Activate new wp plugin.png|1200px|center|link=https://help.simplybook.me/images/3/32/Activate_new_wp_plugin.png]]

:2. Navigate to plugin Settings.

~~[[File:Wp plugin settings new.png|1200px|center|link=https://help.simplybook.me/images/2/25/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~~.

:If you have not created it yet, simply follow the Create free account steps.

[[File:~~Wordpress~~ new ~~login~~ or ~~register~~.png|1200px|center|link=https://help.simplybook.me/images/9/95/~~Wordpress_new_login_or_register~~.png]]

[[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]]

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

[[File:Wp new dashboard overview.png|1200px|center|link=https://help.simplybook.me/images/a/ab/Wp_new_dashboard_overview.png]]

: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.

[[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]]

:6. Switch to Design tab.

:Adjust the look for your widget.

: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]]

: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.

[[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]]

:4. ~~Log in providing company login<~~/~~span>,~~ ~~user login~~ ~~and password~~.~~~~

: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.

[[File:~~Sb login page~~.png|1200px|center|link=https://help.simplybook.me/images/f/f3/~~Sb_login_page~~.png]]

[[File:Wp edit predefined path.png|1200px|center|link=https://help.simplybook.me/images/d/d7/Wp_edit_predefined_path.png]]

:~~5. Confirm the connection between SimplyBook.me account and your WordPress system.~~

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

~~:You will get~~ the one~~-time code to finalise~~ the ~~connection~~.

[[File:Wp new predefined options.png|1200px|center|link=https://help.simplybook.me/images/7/70/Wp_new_predefined_options.png]]

[[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]]

:6. ~~Switch~~ to ~~'''Design''' tab~~.~~ ~~

:9. As alternative way to add the functionality to the page you can use the shortcode.

:~~Adjust~~ the ~~design~~ ~~settings for your widget. ~~

:Copy the calendar shortcode from the plugin Settings page.

~~:You can select the preferance calendar layout, change the theme, adjust the colors and many more.~~

[[File:Wp new shortcode for widget.png|1200px|center|link=https://help.simplybook.me/images/e/e5/Wp_new_shortcode_for_widget.png]]

~~: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]]

:~~7. Save your settings and navigate~~ to ~~General tab of~~ the ~~plugin interface.~~

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

[[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]]

[[File:Wp new paste shortcode.png|1200px|center|link=https://help.simplybook.me/images/0/0a/Wp_new_paste_shortcode.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.

~~[[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]]~~

~~ ~~

==As a Widget==

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

@@ Line 12: / Line 12: @@
 :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]]
+[[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>
-[[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.
+: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:Wordpress new login or register.png|1200px|center|link=https://help.simplybook.me/images/9/95/Wordpress_new_login_or_register.png]]
+[[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]]
+: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>
-: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>
+: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:Sb login page.png|1200px|center|link=https://help.simplybook.me/images/f/f3/Sb_login_page.png]]
+[[File:Wp edit predefined path.png|1200px|center|link=https://help.simplybook.me/images/d/d7/Wp_edit_predefined_path.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.
+:And select the necessary one(s) in the popup that appears.
-:You will get the one-time code to finalise the connection.
+[[File:Wp new predefined options.png|1200px|center|link=https://help.simplybook.me/images/7/70/Wp_new_predefined_options.png]]
-[[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>
+:9. As alternative way to add the functionality to the page you can use the shortcode.
-:Adjust the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">design</span> settings for your widget.<br>
+:Copy the calendar shortcode from the plugin <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> page.
-:You can select the preferance calendar layout, change the theme, adjust the colors and many more.
+[[File:Wp new shortcode for widget.png|1200px|center|link=https://help.simplybook.me/images/e/e5/Wp_new_shortcode_for_widget.png]]
-: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.
+:And simply paste it to the HTML part on the desired page
-[[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]]
+[[File:Wp new paste shortcode.png|1200px|center|link=https://help.simplybook.me/images/0/0a/Wp_new_paste_shortcode.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>