Created page with "= iFrame-widget = <br><br> :1. Find iFrame-koden på din reservationsside under <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Indstillinger</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Indstillinger for reservationswidget</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">iFrame-widget</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Hen..." |
Created page with ":2. Der vises et pop op-vindue med koden. Klik på den nederste del for at få oplysninger om kundekoden. :Kopier hovedkoden, tilføj den nederste del (til det foruddefinerede afsnit) og erstat " <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Predefined client name</span>", " <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Predefined client email</span>" og " <span style="background-color:#d4f8e5; padding:5px; border-radiu..." |
||
| Line 40: | Line 40: | ||
<br><br> | <br><br> | ||
== Widgets med foruddefinerede klientoplysninger == | |||
==Widgets | |||
<br> | <br> | ||
Nu kan du også oprette en widget til en bestemt kunde med hans/hendes oplysninger allerede udfyldt. | |||
:1. | :1. Vælg blot den widget-type, du har brug for, i <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Indstillinger</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Indstillinger for booking-widgets</span>, indstil designet, og klik på <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Hent widget-kode.</span> | ||
[[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> | ||
:2. Der vises et pop op-vindue med koden. Klik på den nederste del for at få oplysninger om kundekoden. | |||
:Kopier hovedkoden, tilføj den nederste del (til det foruddefinerede afsnit) og erstat " <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Predefined client name</span>", " <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Predefined client email</span>" og " <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Predefined client phone</span> " med de nødvendige kundeoplysninger. | |||
:2. | |||
: | |||
[[File:Predefined client details redesigned.png|1200px |border| center|link=https://help.simplybook.me/images/3/3a/Predefined_client_details_redesigned.png]] | [[File:Predefined client details redesigned.png|1200px |border| center|link=https://help.simplybook.me/images/3/3a/Predefined_client_details_redesigned.png]] | ||
<br><br> | <br><br> | ||
:3. | :3. Du får følgende kode:<br> | ||
<code><script src="//simplybook.me/v2/widget/widget.js"></script> | <code><script src="//simplybook.me/v2/widget/widget.js"></script> | ||
<script>var widget = new SimplybookWidget({"widget_type":"iframe","url":"https:\/\/companyname.simplybook.me","theme":"belle","theme_settings":{"sb_base_color":"#FF6969","body_bg_color":"#ffffff","dark_font_color":"#494949","light_font_color":"#ffffff","sb_busy":"#dad2ce","sb_available":"#d3e0f1"},"timeline":"flexible","datepicker":"top_calendar","is_rtl":false,"app_config":{"predefined": {"client": {<br> | <script>var widget = new SimplybookWidget({"widget_type":"iframe","url":"https:\/\/companyname.simplybook.me","theme":"belle","theme_settings":{"sb_base_color":"#FF6969","body_bg_color":"#ffffff","dark_font_color":"#494949","light_font_color":"#ffffff","sb_busy":"#dad2ce","sb_available":"#d3e0f1"},"timeline":"flexible","datepicker":"top_calendar","is_rtl":false,"app_config":{"predefined": {"client": {<br> | ||
| Line 62: | Line 59: | ||
}});</script></code> | }});</script></code> | ||
<br><br> | <br><br> | ||
<div lang="en" dir="ltr" class="mw-content-ltr"> | <div lang="en" dir="ltr" class="mw-content-ltr"> | ||
:4. As a result the details of this client will be pre-filled in the widget and there will be no need for client to provide them. | :4. As a result the details of this client will be pre-filled in the widget and there will be no need for client to provide them. | ||
Revision as of 12:24, 19 May 2025
- Hvorfor du bør bruge vores widgets
- Video-vejledning tilgængelig
iFrame-widget
- 1. Find iFrame-koden på din reservationsside under Indstillinger -> Indstillinger for reservationswidget -> iFrame-widget -> Hent widgetkode.
- 2. Indsæt den i HTML-koden <body> på din hjemmeside (eller et andet sted på din hjemmesideplatform, der er beregnet til indsættelse af HTML JavaScript iFrame-kode).
Bemærk! Forskellige hjemmesidebyggere/platforme kan have forskellige måder at tilføje HTML-kode på. Du bør først kontrollere, om din hjemmeside understøtter indsættelse af HTML JavaScript-kode.
- Her er vejledninger til flere populære hjemmesidebyggere:
Widgets med foruddefinerede tjenester, udbydere, kategorier eller placeringer
Denne funktion giver dig mulighed for at generere iframe-kode specifikt til den service, leverandør, kategori eller placering, du har. Hvis du f.eks. har to tjenester, A og B, og du vælger tjeneste A som foruddefineret, åbnes widgetten på den pågældende tjeneste, og trinnet med at vælge tjeneste springes over. Denne funktion kan være nyttig, hvis du kun vil vise bestemte tjenester på en bestemt side på din hjemmeside. Trinene til at generere koden er de samme som ovenfor, men i widgetindstillingerne skal du vælge det element, du vil foruddefinere.
Widgets med foruddefinerede klientoplysninger
Nu kan du også oprette en widget til en bestemt kunde med hans/hendes oplysninger allerede udfyldt.
- 1. Vælg blot den widget-type, du har brug for, i Indstillinger -> Indstillinger for booking-widgets, indstil designet, og klik på Hent widget-kode.
- 2. Der vises et pop op-vindue med koden. Klik på den nederste del for at få oplysninger om kundekoden.
- Kopier hovedkoden, tilføj den nederste del (til det foruddefinerede afsnit) og erstat " Predefined client name", " Predefined client email" og " Predefined client phone " med de nødvendige kundeoplysninger.
- 3. Du får følgende kode:
<script src="//simplybook.me/v2/widget/widget.js"></script>
<script>var widget = new SimplybookWidget({"widget_type":"iframe","url":"https:\/\/companyname.simplybook.me","theme":"belle","theme_settings":{"sb_base_color":"#FF6969","body_bg_color":"#ffffff","dark_font_color":"#494949","light_font_color":"#ffffff","sb_busy":"#dad2ce","sb_available":"#d3e0f1"},"timeline":"flexible","datepicker":"top_calendar","is_rtl":false,"app_config":{"predefined": {"client": {
"name": "Mary",
"email": "mary@gmail.com",
"phone": "+1234567890"
}}
}});</script>
- 4. As a result the details of this client will be pre-filled in the widget and there will be no need for client to provide them.
Widgets for Client Login, Packages, Memberships, Gift Cards
Please note! It currently works with iFrame widgets only and does not work with booking button and contact button widgets.
If you are using one or several of these features it may be necessary to add a widget that will allow your clients to use the option on your website.
It can be done in a simple way by adding of the corresponding "navigate" element to the widget code:
- Client Login - "navigate":"client/sign-in"
- Packages - "navigate":"packages"
- Memberships - "navigate":"membership"
- Gift Cards - "navigate":"gift-card"
Gift Cards widget code example:
<script src="//simplybook.it/v2/widget/widget.js"></script>
<script>var widget = new SimplybookWidget({"widget_type":"iframe","url":"https:\/\/demo.simplybook.it","navigate":"gift-card","theme":"default","theme_settings":{"timeline_show_end_time":"0","timeline_modern_display":"as_slots","sb_base_color":"#0cadef","display_item_mode":"block","booking_nav_bg_color":"#80d0f2","body_bg_color":"#f7f7f7","dark_font_color":"#494949","light_font_color":"#ffffff","btn_color_1":"#5e7da7","sb_company_label_color":"#ffffff","hide_img_mode":"0","show_sidebar":"1","sb_busy":"#dad2ce","sb_available":"#0cadef"},"timeline":"modern","datepicker":"inline_datepicker","is_rtl":false,"app_config":{"predefined":[]}});</script>
Booking Button Widget
- 1. Take the booking button code of your booking page in Settings -> Booking widget settings -> Booking button -> Get widget code.
- 2. Insert it to the HTML code <body> of your website (or any other place in your website platform designed for inserting HTML JavaScript iFrame code).
Please note! Different website builders/platforms may have various ways to add HTML code, you should check first whether your website supports inserting HTML JavaScript code.
- Widgets with predefined service, provider, category or location.
This feature allows you to generate iframe code specifically for service, provider, category or location you have. For example, if you have 2 services A and B and you choose service A as predefined, the widget will open on that service, skipping the step of choosing the service. This feature may be useful if you need to display only certain services on a specific page on your website. The steps to generate the code are the same as above, only in the settings of the widget, choose the item you need to predefine.
Booking and Contact Button Widget
- 1. Enable Contact Widget in Custom Features -> For Development.
- 2. Take the booking button code of your booking page by navigating to Settings near this custom feature or in Settings in the left-side menu -> Booking widgets settings -> Contact widget -> Get widget code.
- 3. Insert it to the HTML code <body> of your website (or any other place in your website platform designed for inserting HTML JavaScript iFrame code).
Please note! Different website builders/platforms may have various ways to add HTML code, you should check first whether your website supports inserting HTML JavaScript code.
Reviews Widget
Wish to add reviews your clients leave on the booking page to your website?
Just follow these instructions:
- 1. Please go to Settings -> Booking widgets settings -> Reviews widget.
- 2. On the page you will be able to select the theme, set colors, decide on the number of reviews you wish to display and whether you wish your clients to be able to add reviews using the widget.
- 3. And now, when design is set, just click on Get widget code button, copy the code and insert it to your website to the desired place.
Congratulations! Widget is now ready, your reviews will be published and updated on your website!
