WordPress integration: Difference between revisions

No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
<languages/>
<translate>
<!--T:1-->
{{#seo:
{{#seo:
|title=WordPress plugin - SimplyBook.me
|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
|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
|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>


<!--T:2-->
__FORCETOC__
__FORCETOC__


<!--T:3-->
==With the help of WordPress plugin==
==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>
: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.
: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>
<br><br>
:2. Navigate to plugin <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings.</span>
: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>
<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>
: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>
<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>
: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:Sb login page.png|1200px|center|link=https://help.simplybook.me/images/f/f3/Sb_login_page.png]]
[[File:Wp new dashboard overview.png|1200px|center|link=https://help.simplybook.me/images/a/ab/Wp_new_dashboard_overview.png]]
<br><br>
<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.
: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.
:You will get the one-time code to finalise the connection.
[[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]]
[[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]]
</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>
<br><br>
:6. Switch to '''Design''' tab.<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>
:Adjust the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">design</span> settings for your widget.<br>
:Open the page you would like to add the booking functionality to or add a new one.
:You can select the preferance calendar layout, change the theme, adjust the colors and many more.
:Click on "+" button there and look for '''Simplybook''' option. Click on it to add to the page. Save the page.
:Here you can also select some predefined options for the plugin if necessary.
:After the website is published the clients will be able to book your services.
[[File:Wordpress design settings overview.png|1200px|center|link=https://help.simplybook.me/images/5/54/Wordpress_design_settings_overview.png]]
[[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>
<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.
</translate>
[[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]]
<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>
<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>
:And select the necessary one(s) in the popup that appears.
: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>
[[File:Wp new predefined options.png|1200px|center|link=https://help.simplybook.me/images/7/70/Wp_new_predefined_options.png]]
: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.
<br><br>
[[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]]
:9. As alternative way to add the functionality to the page you can use the shortcode.
<br><br><br><br>
: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==
==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;">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>


<!--T:8-->
[[File:Booking widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]
[[File:Booking widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]
<br><br>
<br><br>
Line 61: Line 91:
<br><br>
<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).
:<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).


<!--T:10-->
[[File:Wp select location.png| center]]
[[File:Wp select location.png| center]]
<br><br>
<br><br>
<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.
</translate>