WordPress integration: Difference between revisions

From SimplyBook.me
No edit summary
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
<languages/>
<translate>
{{#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>


__FORCETOC__
__FORCETOC__
Line 15: Line 19:
[[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 new.png|1200px|center|link=https://help.simplybook.me/images/2/25/Wp_plugin_settings_new.png]]
<br><br>
<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;">login</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;">registration</span> option and sign up following the suggested steps.
: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:Wp plugin login or register upd.png|1200px|center|link=https://help.simplybook.me/images/3/38/Wp_plugin_login_or_register_upd.png]]
[[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>
<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. 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>
Line 26: Line 30:
[[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: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>
<br><br>
:6. Adjust the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">design</span> settings for your widget.<br>
:6. Switch to '''Design''' tab.<br>
:You can also select some predefined options for the plugin if necessary.
:Adjust the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">design</span> settings for your widget.<br>
[[File:Wp adjust plugin design.png|1200px|center|link=https://help.simplybook.me/images/6/6e/Wp_adjust_plugin_design.png]]
: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>
<br><br>
: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.
: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:Save wp design.png|1200px|center|link=https://help.simplybook.me/images/0/06/Save_wp_design.png]]
[[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>
<br><br>
: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.
:The page with the booking widget is already pre-created for you - you can edit, remove or keep it as it is.<br>
[[File:Paste tag to page.png|1200px|center|link=https://help.simplybook.me/images/7/7e/Paste_tag_to_page.png]]
: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>
<br><br><br><br>
==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>


[[File:Booking widgets path new navigation.png|1200px| center]]
[[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>
[[File:Iframe widget creation new navigation.png|1200px| center]]
[[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>
<br><br>
 
[[File:Copy widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png ]]
[[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 <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">+</span> 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.

Latest revision as of 17:37, 16 January 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 click on Create free account option and sign up following the suggested steps.



4. Log in providing company login, user login and password.



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



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.



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



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.





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