Changes

From SimplyBook.me
no edit summary
Line 60: Line 60:  
<span class="qa">[[Wix integration]]</span>
 
<span class="qa">[[Wix integration]]</span>
 
<div class="mw-collapsible-content">
 
<div class="mw-collapsible-content">
 +
 +
 +
 +
 
If you use Wix, and if you want to add the possibility of bookings to your website we have the right solution for you!
 
If you use Wix, and if you want to add the possibility of bookings to your website we have the right solution for you!
 +
    
Our iFrame widget allows you to connect the Wix website with [https://simplybook.me SimplyBook.com] and let your clients book right from the website both from their PC or from their mobile devices. This solution will make your booking process more convenient and easy.
 
Our iFrame widget allows you to connect the Wix website with [https://simplybook.me SimplyBook.com] and let your clients book right from the website both from their PC or from their mobile devices. This solution will make your booking process more convenient and easy.
 +
    
To do this, please  follow these simple steps:
 
To do this, please  follow these simple steps:
   −
:1. Go to '''Wix App Store'''.
+
:1. Go to website editing mode, select the page to edit or add a new one and click on "+" on the left to add new element.
 
+
[[File:Wix add element.png|border | center]]
[[File:Wix app market new.png | center]]
   
<br><br>
 
<br><br>
:2. Enter “'''HTML'''” in the Search apps field.
+
:2. Look for "Embed" option and select "HTML iFrame"
[[File:New wix html.png | center]]
+
[[File:Wix embed iframe path.png| border| center]]
 
<br><br>
 
<br><br>
:3. Select “'''HTML iFrame/Embed'''” plugin.
+
:3. Switch to “'''Enter code'''” mode.
[[File:Html iframe.jpg | center]]
+
[[File:Wix enter code path.png |border| center]]
[[File:New wixt html add.png | center]]
   
<br><br>
 
<br><br>
:4. Switch to “'''HTML code'''” mode.
+
:4. Go to your [https://simplybook.me SimplyBook.me] admin page. Navigate to '''Settings → Bookings on Webpage or Facebook → Booking widget for your own website'''.
[[File:Screenshot from 2017-06-16 15-47-05.png | center]]
  −
<br><br>
  −
:5. Go to your [https://simplybook.me SimplyBook.com] admin page. Go to '''Settings → Bookings on Webpage or Facebook → Booking widget for your own website'''.
   
[[File:Widget code path.png| center]]
 
[[File:Widget code path.png| center]]
 
<br><br>
 
<br><br>
:6. Press “'''Save Settings and get iFrame code'''”. Almost done, just few simple steps left!
+
:5. Press “'''Get widget code'''”. Almost done, just few simple steps left!
 
[[File:Create iframe widget.png | center]]
 
[[File:Create iframe widget.png | center]]
 
<br><br>
 
<br><br>
:7. Copy the code you received.
+
:6. Copy the code you received.
 
[[File:Iframe widget code.png | center]]
 
[[File:Iframe widget code.png | center]]
 
<br><br>
 
<br><br>
:8. Insert the code into Wix iFrame plugin and Press “'''Update'''”.  
+
:7. Insert the code into Wix iFrame code window and Press “'''Apply/Update'''”.  
[[File:New wix add code2.png | center]]
+
[[File:Wix paste widget code.png|border | center]]
 
<br><br>
 
<br><br>
 
Congratulations! Now you have [https://simplybook.me the best booking system] on your Wix website!
 
Congratulations! Now you have [https://simplybook.me the best booking system] on your Wix website!
[[File:Wix new widget.png | center]]
+
[[File:Wix widget result.png|border | center]]
      Line 102: Line 103:  
<span class="qa">[[Squarespace]]</span>
 
<span class="qa">[[Squarespace]]</span>
 
<div class="mw-collapsible-content">
 
<div class="mw-collapsible-content">
[[File:Squarespace_new.jpg |left]]
     −
'''iFrame widget:'''
+
[[Squarespace#iFrame_widget| As an iFrame widget]]
:1. In your [https://simplybook.me/ Simplybook] admin page get the code in Settings//Bookings on Webpage or Facebook//Booking widget for your own website//Save settings and Get code.
+
 
:2. On your Squarespace account, choose the page where are planning to insert your booking calendar. We recommend using a new page in Main Navigation designed specifically for online booking. You can name it "Book Now", "Online Booking" or "Calendar." Open the page editor. Click an ''Insert Point'' and select ''Code'' from the Block Menu.
+
[[Squarespace#Booking_button_widget| As a booking button widget]]
:3. Insert the code received in [https://simplybook.me/ Simplybook] admin page, to the ''Code'' box and click "Apply".
     −
'''Booking button widget:'''
  −
:1.  In your [https://simplybook.me/ Simplybook] admin page get the code in Settings//Bookings on Webpage or Facebook//Booking button widget for your website//Save settings and Get button code.
  −
:2. In your Squarespace account go to Settings//Advanced//Code injection. ([https://support.squarespace.com/hc/en-us/articles/205815908 Squarespace instructions how to inject the code])
  −
:3. Insert the code received in [https://simplybook.me/ Simplybook] admin page, to your Squarespace settings page.
   
</div>
 
</div>
<br/>
  −
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
  −
<span class="qa">[[Weebly]]</span>
  −
<div class="mw-collapsible-content">
  −
[[File:New_weebly.png |left]]
  −
  −
'''Booking button:'''
  −
:Chose "Button" function in the building menu, change button name, choose style and insert the link to your booking page (Example: http://wikisimplybook.simplybook.me/)
  −
'''iFrame Widget:'''
  −
:1. Choose a page where you need to insert booking functionality or create separate page specifically for [https://simplybook.me/ SimplyBook].
  −
​2. Choose "Embed Code" building function and drag it to the corresponding place.
  −
:3. In your SimplyBook admin page go to Settings//Bookings on Webpage or Facebook//Booking widget for your own website//Save settings and get iFrame code.
  −
:​4. Insert the code into the "Embed" area.
  −
:5. Publish changes.
  −
'''[http://appointmentscheduleronline.weebly.com/ Version with pictures]'''
  −
'''[http://appointmentscheduleronline.weebly.com/simplybook.html Make Test Bookings and check widget examples]'''
   
</div>
 
</div>
 
<br/>
 
<br/>