SimplyBook.me

Additional tips: Difference between revisions

← Older edit
VisualWikitext
No edit summary
Marked this version for translation
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
<languages/>
<translate>
<!--T:1-->
{{#seo:
|title=Additional tips - SimplyBook.me
|description=Discover helpful tips to get the most from SimplyBook.me. Explore features and improve your setup today. Click to learn more!
|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, setup, setup help, support, help content
}}
</translate>
<translate>
<!--T:2-->
=How to take screenshot=
=How to take screenshot=
<br><br>
<br><br>
Line 7: Line 20:
3. Press Ctrl + V on the keyboard to paste your screenshot<br/>
3. Press Ctrl + V on the keyboard to paste your screenshot<br/>
4. Click the main File option in the top-left corner of Paint, select Save as, give the title to the file and click Save.<br/>
4. Click the main File option in the top-left corner of Paint, select Save as, give the title to the file and click Save.<br/>
<br><br>
<br><br></translate>
====Taking Screenshot on Mac====
<translate>
====Taking Screenshot on Mac==== <!--T:11-->


<!--T:3-->
1. Screenshot of the entire screen: Hold down "Command" + "Shift" and press "3" on the keyboard. The file will be saved automatically on the desktop and will have the name like “Screen shot 2016-11-11 at 01.45.00 PM.png”.<br/>
1. Screenshot of the entire screen: Hold down "Command" + "Shift" and press "3" on the keyboard. The file will be saved automatically on the desktop and will have the name like “Screen shot 2016-11-11 at 01.45.00 PM.png”.<br/>
2. Screenshot of the selected area: Hold down "Command" + "Shift" and press "4" on the keyboard, then use your mouse to rectangle and capture the area you need.<br/>
2. Screenshot of the selected area: Hold down "Command" + "Shift" and press "4" on the keyboard, then use your mouse to rectangle and capture the area you need.<br/>
Line 16: Line 31:
====Taking Screenshot on Android====
====Taking Screenshot on Android====


<!--T:4-->
Hold down together Volume down(or Home) and Power buttons for 1-2 seconds. The screen flashes and the screenshot of the entire screen is saved to you Gallery.<br/>
Hold down together Volume down(or Home) and Power buttons for 1-2 seconds. The screen flashes and the screenshot of the entire screen is saved to you Gallery.<br/>
<br><br>
<br><br></translate>
====Taking Screenshot on iOS====
<translate>
====Taking Screenshot on iOS==== <!--T:12-->


Hold down the Lock(Sleep/Wake) button at the top of the device, then press and immediately release Home button. The screen flashed and you can find the picture in the Photos app.<br/>
<!--T:5-->
<br><br>
If you have the device with Home button. Hold down the Lock(Sleep/Wake) button at the top of the device, then press and immediately release Home button. The screen flashed and you can find the picture in the Photos app.<br/>
If you have the device without Home button. Hold down together Volume down and Power buttons for 1-2 seconds.<br><br>
====Taking Screenshot on Chrome OS====
====Taking Screenshot on Chrome OS====


<!--T:6-->
1. Screenshot of the entire screen: Hold down the ‘Ctrl’ and "Window Switcher" keys at the same time, "Window Switcher" is the icon of multiple squares located in the top row. Then you will see the message at the bottom of the screen that Screenshot is taken. You will be able to find it in the Downloads folder.<br/>
1. Screenshot of the entire screen: Hold down the ‘Ctrl’ and "Window Switcher" keys at the same time, "Window Switcher" is the icon of multiple squares located in the top row. Then you will see the message at the bottom of the screen that Screenshot is taken. You will be able to find it in the Downloads folder.<br/>
2. Screenshot of the selected area: Press Ctrl and Shift buttons at once, then press the "Window Switcher" button. Chrome’s cursor will be switched to crosshair. Click and drag a square across area of the screen you want to save, then release the trackpad or mouse button. Screenshot will be saved to the Download folder.
2. Screenshot of the selected area: Press Ctrl and Shift buttons at once, then press the "Window Switcher" button. Chrome’s cursor will be switched to crosshair. Click and drag a square across area of the screen you want to save, then release the trackpad or mouse button. Screenshot will be saved to the Download folder.
Line 29: Line 48:
=How to copy link from browser=
=How to copy link from browser=
Go to the page you need to get the link from, example is https://sbdemo.simplybook.me/v2, in the upper section of browser you will see the url link, highlight the link, right-mouse-click it and "'''Copy'''" it. Then right-mouse-click and "'''Paste'''" it to the place where you need to insert it.  
Go to the page you need to get the link from, example is https://sbdemo.simplybook.me/v2, in the upper section of browser you will see the url link, highlight the link, right-mouse-click it and "'''Copy'''" it. Then right-mouse-click and "'''Paste'''" it to the place where you need to insert it.  
 
</translate>
[[File:Copy link from browser.png| center]]
<translate>
<!--T:7-->
[[File:Copy_link_from_address_bar.png|1200px| center]]
<br><br>
<br><br>
=How to reload page=
=How to reload page=


<!--T:8-->
====1. Reload page in Chrome:====
====1. Reload page in Chrome:====
1.1. Click the Reload icon in address bar.<br>
1.1. Click the Reload icon in address bar.<br>
Line 39: Line 61:
1.3. Press Ctr + F5 or Ctrl + R in Windows.<br>
1.3. Press Ctr + F5 or Ctrl + R in Windows.<br>
1.4. Press ⌘Command + R in OS X.
1.4. Press ⌘Command + R in OS X.
[[File:Chrome.png|center]]
[[File:How_to_reload_the_page.png|1200px|center]]
<br><br>
<br><br>
====2. Reload page in Firefox:====
====2. Reload page in Firefox:====
Line 46: Line 68:
2.3. Press Ctr + F5 or Ctrl + R in Windows.<br>
2.3. Press Ctr + F5 or Ctrl + R in Windows.<br>
2.4. Press ⌘Command+Shift+R in OS X.
2.4. Press ⌘Command+Shift+R in OS X.
[[File:Firefox.png|center]]
<br><br></translate>
<br><br>
<translate>
<!--T:13-->
====3. Reload page in Internet Explorer:====
====3. Reload page in Internet Explorer:====
3.1. Click the Reload icon in address bar.<br>
3.1. Click the Reload icon in address bar.<br>
Line 71: Line 94:
:5. In the menu at the top "''Obliterate the following items from''" , select ''"the beginning of time"''.
:5. In the menu at the top "''Obliterate the following items from''" , select ''"the beginning of time"''.
:6. Click Clear browsing data.
:6. Click Clear browsing data.
<br><br>
<br><br></translate>
<translate>
<!--T:14-->
;Mobile Android and iOS
;Mobile Android and iOS
:1. Open Chrome browser.
:1. Open Chrome browser.
Line 98: Line 123:
:3. You will get a confirmation at the bottom of the window once it has successfully cleared your cache and cookies.
:3. You will get a confirmation at the bottom of the window once it has successfully cleared your cache and cookies.
More about cache in IE [https://kb.wisc.edu/helpdesk/page.php?id=15141 here]<br>
More about cache in IE [https://kb.wisc.edu/helpdesk/page.php?id=15141 here]<br>
<br><br>
<br><br></translate>
<translate>
<!--T:15-->
==Safari==
==Safari==
:1. Click Safari in the upper left hand side of your screen. In the menu that appears, click Preferences.<br>
:1. Click Safari in the upper left hand side of your screen. In the menu that appears, click Preferences.<br>
Line 111: Line 138:
More about clearing cache in different browsers [https://kb.wisc.edu/helpdesk/page.php?id=12384 here]
More about clearing cache in different browsers [https://kb.wisc.edu/helpdesk/page.php?id=12384 here]


<br><br>
<!--T:9-->
=How to add SimplyBook.me to mobile screen=
<br><br></translate>
<translate>
=How to add SimplyBook.me to mobile screen= <!--T:16-->


<!--T:10-->
1. Android device:<br>
1. Android device:<br>
1.1. Open your mobile browser and log into your Simplybook.me admin account there. Click 3 dots icon in the right top corner of the mobile browser:
1.1. Open your mobile browser and log into your Simplybook.me admin account there. Click 3 dots icon in the right top corner of the mobile browser:
[[File:Mobile screen.png|center]]
1.2. In the Menu pop up select "Add to Home screen"
1.2. In the Menu pop up select "Add to Home screen"
[[File:Add to homescreen.png|center]]
1.3. Insert Title for the icon and click Add.
1.3. Insert Title for the icon and click Add.
[[File:Title.jpg|center]]<br>
1.4 Check your home page, the icon will appear there.
1.4 Check your home page, the icon will appear there.
[[File:Icon.jpg|center]]<br><br>
[[File:Add site to home screen.jpg|1200px|center]]<br><br>
2. IOS device:<br>
2. IOS device:<br>
2.1 Launch the Safari browser on Apple’s iOS and navigate to the website or web page you want to add to your home screen. <br>
2.1 Launch the Safari browser on Apple’s iOS and navigate to the website or web page you want to add to your home screen. <br>
Line 133: Line 160:
1. In SimplyBook.me admin interface go to Custom Features // Custom Features section and enable Custom CSS custom feature.<br>
1. In SimplyBook.me admin interface go to Custom Features // Custom Features section and enable Custom CSS custom feature.<br>
2. In this custom feature Settings add to Booking pages CSS tab code:<br><br>
2. In this custom feature Settings add to Booking pages CSS tab code:<br><br>
''New themes''<br>
:For usual confirmation page
:For usual confirmation page
<code>#booking-result-view .booking-item.booking-confirmed {
<code>#booking-result-view .booking-item.booking-confirmed {
Line 141: Line 167:
<code>.invoice-pay-page .invoice-info .part table b.text-success{
<code>.invoice-pay-page .invoice-info .part table b.text-success{
content: url('http://    ';);
content: url('http://    ';);
}</code>
}</code><br>
<br><br>
:where content should contain tracking pixel url. And press Save CSS.
''Old themes''<br>
<code>
.booking-result #pageNotifications {
content: url('http://    ';);
}
</code><br>
where content should contain tracking pixel url. And press Save CSS.
<br><br>
<br><br>
=Facebook tracking pixel=
=Create Facebook pixel=
To add Facebook tracking pixel to your site please follow the instructions from [https://www.facebook.com/business/help/952192354843755 Advertiser Help Center]
To add Facebook tracking pixel to your site please follow the instructions from [https://www.facebook.com/business/help/952192354843755 Advertiser Help Center]
<br><br>
<br><br>
;To add Facebook tracking pixel to SimplyBook.me site:<br><br>
;To add Facebook tracking pixel to SimplyBook.me site:<br><br>
:1. Go to your [https://www.facebook.com/business/url/?href=https%3A%2F%2Fwww.facebook.com%2Fads%2Fmanager%2Fpixel%2Ffacebook_pixel&cmsid=952192354843755&creative=link&creative_detail=advertiser-help-center&create_type&destination_cms_id&orig_http_referrer Facebook Pixel tab] in Ads Manager.<br><br>
:1. Go to your [https://www.facebook.com/events_manager2/list/pixel/ Facebook Pixel tab] in Ads Manager.<br><br>
:2. Follow the simple steps to create pixel.<br>
:2. Follow the simple steps to create pixel. Choose to connect a data source.<br>
[[File:Fb pixel get started.png|center]]<br><br>
[[File:Pixel start page.png|border|center]]<br><br>
:3. Insert the title of the pixel and press Create button.<br>
:3. Choose Web option.
[[File:Fb pixel name.png|center]]<br><br>
[[File:Pixel setup web type.png|1000px|border|center]]
:4. Select manual code installation.
<br><br></translate>
[[File:Fb pixel manual installation.png | center]]
<translate>
<!--T:17-->
:4. Select "Facebook pixel".
[[File:Pixel start.png|border|center]]
<br><br>
<br><br>
:5. Copy src of the tracking pixel.<br>
:5. Insert the title of pixel, your booking website address and press "Continue" button.<br>
[[File:Fb pixel code copy.png|center]]<br>
[[File:Connect site.png|center]]<br><br>
:6. In your SimplyBook.me admin interface go to Custom Features // Custom Features section and enable Custom CSS Custom Feature. In this Custom Feature settings add code with src copied from previous step:<br><br>
''New themes''
:For usual confirmation page:
<code>#booking-result-view .booking-item.booking-confirmed { background-image: url("src from facebook"); }</code>
<br><br>
<br><br>
:In case [[Custom_Features#Accept_Payments | Accept payments]] feature is on and invoices are used as the booking confirmation page.
:6. Choose manual code installation.
<code>.invoice-pay-page .invoice-info .part table b.text-success{ background-image: url("src from facebook"); }</code>
[[File:Install code manually.png|border| center]]
<br> <br>
''Old themes''<br>
<code>.go-back-link {
background-image: url("src from facebook");
}
</code><br>
or (it can depend on theme settings and it can be any element present only on successful bookings page)<br>
<code>.booking-result #pageNotifications {
background-image: url("https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&ev=Pageview&noscript=1") !important;
}</code>
<br>
And press Save CSS button.<br>
[[File: Add tracking pixel code new.png |center]]<br><br>
:7. Get back to Facebook pixel setup page and click on "Continue" after copying the code.<br>
:You will see events step. Please select "View Content" there and fill in the required details.
[[File:Fb pixel select view content.png | center]]
<br><br>
<br><br>
:8. Now you can track successful bookings. <br>
:7. Copy the code and insert it to any text editor, copy the src of the tracking pixel.<br>
:In [https://www.facebook.com/business/url/?href=https%3A%2F%2Fwww.facebook.com%2Fads%2Fmanager%2Fpixel%2Fcustom_audience_pixel%2F&cmsid=952192354843755&creative=link&creative_detail=advertiser-help-center&create_type&destination_cms_id&orig_http_referrer Facebook pixel tab] navigate to "Custom Conversions" tab.
[[File:Get facebook code.png|border|center]]
[[File:Setup pixel step 5.png | center]]
<br><br>
<br><br>
:9. Select to create Custom conversion.
[[File:Copy pixel source.png|border|center]]<br>
[[File:Fb pixel go to create conversion.png | center]]
<br><br>
<br><br>
:10. In the Rule section, click on dropdown and change URL to "contains". Then add your company name as in url of your Simplybook.me account as a value.<br>
:8. In your SimplyBook.me admin interface go to Custom Features // Custom Features section and enable Custom CSS Custom Feature.<br>In this Custom Feature settings select the tab depending on whether you will be traking successful bookings on the booking website provided by SimplyBook.me or booking widget on your own website . Add the code with src copied from previous step.:<br><br>
:In Category section choose View Content. Then press |Create".<br>
:For usual confirmation page:
[[File:Fb pixel create conversion rule.png|center]]<br><br>
<code>#booking-result-view .booking-item.booking-confirmed { background-image: url("src from facebook"); }</code>
:11. Check your booking pages activity in Facebooc pixel//Overview tab.<br>
<br><br>
[[File:Pixel tracking results overview.png|center]]<br>
:In case [[Custom_Features#Accept_Payments | Accept payments]] feature is on and invoices are used as the booking confirmation page.<br>
:This way you will track successful purchases.
<code>.invoice-pay-page .invoice-info .part table b.text-success{ background-image: url("src from facebook"); }</code>
<br><br>
:And press Save CSS button.<br>
[[File: Add tracking pixel code new.png |center]]<br><br>
:9. Get back to Facebook pixel setup page and skip the next steps in case you do not need them.
<br>
:10. Check your booking page activity in Facebook pixel -> Overview tab.<br>
[[File:Pixel results.png|border|center]]<br>
<br><br>
<br><br>
</translate>
Retrieved from "https://help.simplybook.me/index.php?title=Additional_tips"