Widgets for your own website/da: Difference between revisions

From SimplyBook.me
VisualWikitext
Created page with ":Hvorfor du bør bruge vores widgets link=https://www.youtube.com/watch?v=ngAxW1uTOk4 <br><br> :Video-vejledning tilgængelig link=https://youtu.be/8mi4MCmE_qg <br><br>"
 
No edit summary
Tags: Mobile edit Mobile web edit
 
(17 intermediate revisions by 2 users not shown)
Line 3: Line 3:




:Hvorfor du bør bruge vores widgets [[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=ngAxW1uTOk4]]
:Hvorfor du bør bruge vores widgets <p><youtube>ngAxW1uTOk4</youtube></p>
<br><br>
<br><br>
:Video-vejledning tilgængelig [[File:Youtube-Logo.png|link=https://youtu.be/8mi4MCmE_qg]]
:Video-vejledning tilgængelig <p><youtube>8mi4MCmE_qg</youtube></p>
<br><br>
<br><br>


Line 21: Line 21:
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''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.</span>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''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.</span>
:'''Her er vejledninger til flere populære hjemmesidebyggere:'''
:'''Her er vejledninger til flere populære hjemmesidebyggere:'''
:::[https://help.simplybook.me/index.php/WordPress_integration *Wordpress]
:::[[Special:MyLanguage/WordPress_integration |Wordpress]]
:::[https://help.simplybook.me/index.php/Shopify *Shopify]
:::[[Special:MyLanguage/Shopify |Shopify]]
:::[https://help.simplybook.me/index.php/Joomla_integration *Joomla]
:::[[Special:MyLanguage/Joomla_integration |Joomla]]
:::[https://help.simplybook.me/index.php/Wix_integration *Wix]
:::[[Special:MyLanguage/Squarespace |Squarespace]]
:::[https://help.simplybook.me/index.php/Squarespace *Squarespace]
:::[[Special:MyLanguage/Weebly |Weebly]]
:::[https://help.simplybook.me/index.php/Weebly *Weebly]
:::[[Special:MyLanguage/Go_Daddy |Go Daddy]]
:::[https://help.simplybook.me/index.php/Go_Daddy *Go Daddy]
:::[[Special:MyLanguage/SITE123_integration |SITE123]]
:::[https://help.simplybook.me/index.php/SITE123_integration *SITE123]


;[https://simplydemowidgets.mozello.com/ Se hvordan widgets kan se ud på din hjemmeside]
;[https://simplydemowidgets.mozello.com/ Se hvordan widgets kan se ud på din hjemmeside]
<br><br>
<br><br>
<div lang="en" dir="ltr" class="mw-content-ltr">
== Widgets med foruddefinerede tjenester, udbydere, kategorier eller placeringer ==
==Widgets with predefined service, provider,category or location==
<br>
<br>
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
Denne funktion giver dig mulighed for at generere iframe-kode specifikt til den service, leverandør, [[Special:MyLanguage/Service_Categories_custom_feature|kategori]] eller [[Special:MyLanguage/Multiple_Locations_custom_feature |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.
This feature allows you to generate iframe code specifically for service, provider, [[Custom_Features#Service_Categories |category]] or [[Custom_Features#Multiple_Locations |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.
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
[[File:Widget predefined values redesigned.png|1200px| center|link=https://help.simplybook.me/images/e/ed/Widget_predefined_values_redesigned.png]]
[[File:Widget predefined values redesigned.png|1200px| center|link=https://help.simplybook.me/images/e/ed/Widget_predefined_values_redesigned.png]]
<br><br>
<br><br>
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
== Widgets med foruddefinerede klientoplysninger ==
==Widgets with predefined client details==
<br>
<br>
Now you can also create a widget for some particular client with his/her details already filled in.
Nu kan du også oprette en widget til en bestemt kunde med hans/hendes oplysninger allerede udfyldt.
:1. Just select the widget type you need in <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>, set the design and click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code.</span>
:1. Vælg blot den widget-type, du har brug for, i <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Indstillinger</span> -&gt; <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>
</div>
:2. Der vises et pop op-vindue med koden. Klik på den nederste del for at få oplysninger om kundekoden.
<div lang="en" dir="ltr" class="mw-content-ltr">
: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. You will see a pop-up window with the code, click on the bottom part to get client code details.
:Please copy the main code, add bottom part to it(to predefined section) and replace <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>, <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Predefined client phone</span> with the necessary client details.
[[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. You will get the code like this:<br>
: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 68: Line 58:
}});</script></code>
}});</script></code>
<br><br>
<br><br>
</div>
:4. Som resultat vil denne kundes oplysninger blive udfyldt på forhånd i widgeten, og kunden behøver ikke at indtaste dem.
<div lang="en" dir="ltr" class="mw-content-ltr">
[[File:Predefined client result view.png|center]]
: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.
[[File:Predefined client result view.png | center]]
<br><br>
<br><br>
</div>
== Widgets til [[Special:MyLanguage/Client_Login_custom_feature|klientlogin]], [[Special:MyLanguage/Packages_custom_feature|pakker]], [[Special:MyLanguage/Membership_custom_feature|medlemskaber]], [[Special:MyLanguage/Coupons_and_Gift_Cards_custom_feature|gavekort]] ==
<div lang="en" dir="ltr" class="mw-content-ltr">
==Widgets for [[Client_Login_custom_feature|Client Login]], [[Packages_custom_feature|Packages]], [[Membership_custom_feature|Memberships]], [[Coupons_and_Gift_Cards_custom_feature|Gift Cards]]==
<br><br>
<br><br>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Please note!''' It currently works with iFrame widgets only and does not work with booking button and contact button widgets.</span><br>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Bemærk!''' Det fungerer i øjeblikket kun med iFrame-widgets og fungerer ikke med widgets til bookingknapper og kontaktknapper.</span><br>
<br><br>
<br><br>
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.<br>
Hvis du bruger en eller flere af disse funktioner, kan det være nødvendigt at tilføje en widget, der giver dine kunder mulighed for at bruge denne funktion på din hjemmeside.<br>
It can be done in a simple way by adding of the corresponding <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">"navigate"</span> element to the widget code:
Det kan gøres på en enkel måde ved at tilføje det tilsvarende <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">"navigate"</span> -element til widgetkoden:
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Client_Login_custom_feature|Client Login]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigate":"client/sign-in"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Client_Login_custom_feature|Kundelogin]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigate":"client/sign-in"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Packages_custom_feature|Packages]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigate":"packages"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Packages_custom_feature|Pakker]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigate":"packages"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Membership_custom_feature|Memberships]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigate":"membership"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Membership_custom_feature|Medlemskaber]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigate":"membership"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Coupons_and_Gift_Cards_custom_feature|Gift Cards]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigate":"gift-card"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Coupons_and_Gift_Cards_custom_feature|Gavekort]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigate":"gift-card"</span>
<br><br>
<br><br>
</div>
Eksempel på widgetkode <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Coupons_and_Gift_Cards_custom_feature|for gavekort]]</span>:<br><br>
<div lang="en" dir="ltr" class="mw-content-ltr">
<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Coupons_and_Gift_Cards_custom_feature|Gift Cards]]</span> widget code example:<br><br>
</div>
<code><script src="//simplybook.it/v2/widget/widget.js"></script>
<code><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></code>
<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></code>
<br><br>
<br><br>
<div lang="en" dir="ltr" class="mw-content-ltr">
= Widget til bookingknap =
=Booking Button Widget=
<br><br>
<br><br>
:1. Take the booking button code of your booking page in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking widget settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking button</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code.</span>
:1. Find koden til reservationsknappen på din reservationsside under <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Indstillinger</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Indstillinger for reservationswidget</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Reservationsknap</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Hent widgetkode.</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>
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
[[File:Booking button widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/b/b3/Booking_button_widget_path_redesigned.png]]
[[File:Booking button widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/b/b3/Booking_button_widget_path_redesigned.png]]
<br><br>
<br><br>
Line 107: Line 87:
[[File:Get booking button widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/5/54/Get_booking_button_widget_code_redesigned.png]]
[[File:Get booking button widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/5/54/Get_booking_button_widget_code_redesigned.png]]
<br><br>
<br><br>
</div>
:2. Indsæt det 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).<br>  
<div lang="en" dir="ltr" class="mw-content-ltr">
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''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.</span>
: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).<br>  
:'''Her er vejledninger til flere populære hjemmesidebyggere:'''
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''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.</span>
:::[[Special:MyLanguage/WordPress_integration |Wordpress]]
:'''Here are tutorials for several popular website builders:'''
:::[[Special:MyLanguage/Shopify |Shopify]]
:::*[https://help.simplybook.me/index.php/WordPress_integration Wordpress]
:::[[Special:MyLanguage/Joomla_integration |Joomla]]
:::*[https://help.simplybook.me/index.php/Shopify Shopify]
:::[[Special:MyLanguage/Squarespace |Squarespace]]
:::*[https://help.simplybook.me/index.php/Joomla_integration Joomla]
:::[[Special:MyLanguage/Weebly |Weebly]]
:::*[https://help.simplybook.me/index.php/Wix_integration Wix]
:::[[Special:MyLanguage/Go_Daddy |Go Daddy]]
:::*[https://help.simplybook.me/index.php/Squarespace Squarespace]
:::[[Special:MyLanguage/SITE123_integration |SITE123]]
:::*[https://help.simplybook.me/index.php/Weebly Weebly]
:::*[https://help.simplybook.me/index.php/Go_Daddy Go Daddy]
:::*[https://help.simplybook.me/index.php/SITE123_integration SITE123]
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
;[https://simplydemowidgets.mozello.com/ Se hvordan widgets kan se ud på din hjemmeside]
;[https://simplydemowidgets.mozello.com/ Check how widgets can look like on your website]
</div>




<div lang="en" dir="ltr" class="mw-content-ltr">
;Widgets med foruddefineret service, udbyder, kategori eller placering.
;Widgets with predefined service, provider, category or location.
Denne funktion giver dig mulighed for at generere iframe-kode specifikt til den service, udbyder, [[Special:MyLanguage/Service_Categories_custom_feature |kategori]] eller [[Special:MyLanguage/Multiple_Locations_custom_feature |placering]], du har. Hvis du f.eks. har to tjenester, A og B, og du vælger tjeneste A som foruddefineret, åbnes widgeten 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.
This feature allows you to generate iframe code specifically for service, provider, [[Custom_Features#Service_Categories |category]] or [[Custom_Features#Multiple_Locations |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.
<br><br>
<br><br>
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
= Widget til booking og kontakt =
=Booking and Contact Button Widget=
<br><br>
<br><br>
:1. Enable <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Custom_Features#Contact_Widget |Contact Widget]]</span> in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Custom Features</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">For Development</span>.
:1. Aktivér <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Contact_Widget_custom_feature  |kontaktwidget]]</span> i <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Tilpassede funktioner</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Til udvikling</span>.
[[File:Contact widget enable path redesigned.png|1200px| center|link=https://help.simplybook.me/images/8/8c/Contact_widget_enable_path_redesigned.png]]
[[File:Contact widget enable path redesigned.png|1200px| center|link=https://help.simplybook.me/images/8/8c/Contact_widget_enable_path_redesigned.png]]
<br><br>
<br><br>
:2. Take the booking button code of your booking page by navigating to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> near this custom feature or in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> in the left-side menu -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking widgets settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Contact widget</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code.</span>
:2. Hent bookingknap-koden fra din booking-side ved at navigere til <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Indstillinger</span> nær denne tilpassede funktion eller i <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Indstillinger</span> i menuen til venstre -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Bookingwidget-indstillinger</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Kontaktwidget</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Hent widgetkode.</span>
[[File:Contact widget settings path redesigned.png|1200px|border| center|link=https://help.simplybook.me/images/0/09/Contact_widget_settings_path_redesigned.png]]
[[File:Contact widget settings path redesigned.png|1200px|border| center|link=https://help.simplybook.me/images/0/09/Contact_widget_settings_path_redesigned.png]]
<br><br>
<br><br>
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
[[File:Contact widget design path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/7/74/Contact_widget_design_path_redesigned.png]]
[[File:Contact widget design path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/7/74/Contact_widget_design_path_redesigned.png]]
<br><br>
<br><br>
[[File:Contact widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/4/49/Contact_widget_code_redesigned.png]]
[[File:Contact widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/4/49/Contact_widget_code_redesigned.png]]
<br><br>
<br><br>
: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). <br>
:3. Indsæt det i HTML-koden <body> på din hjemmeside (eller et andet sted på din hjemmesideplatform, der er designet til at indsætte HTML JavaScript iFrame-kode). <br>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''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.</span>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''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.</span>
:'''Here are tutorials for several popular website builders:'''
:'''Her er vejledninger til flere populære hjemmesidebyggere:'''
:::*[https://help.simplybook.me/index.php/WordPress_integration Wordpress]
:::[[Special:MyLanguage/WordPress_integration |Wordpress]]
:::*[https://help.simplybook.me/index.php/Shopify Shopify]
:::[[Special:MyLanguage/Shopify |Shopify]]
:::*[https://help.simplybook.me/index.php/Joomla_integration Joomla]
:::[[Special:MyLanguage/Joomla_integration |Joomla]]
:::*[https://help.simplybook.me/index.php/Wix_integration Wix]
:::[[Special:MyLanguage/Squarespace |Squarespace]]
:::*[https://help.simplybook.me/index.php/Squarespace Squarespace]
:::[[Special:MyLanguage/Weebly |Weebly]]
:::*[https://help.simplybook.me/index.php/Weebly Weebly]
:::[[Special:MyLanguage/Go_Daddy |Go Daddy]]
:::*[https://help.simplybook.me/index.php/Go_Daddy Go Daddy]
:::[[Special:MyLanguage/SITE123_integration |SITE123]]
:::*[https://help.simplybook.me/index.php/SITE123_integration SITE123]
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
;[https://simplydemowidgets.mozello.com/ Se hvordan widgets kan se ud på din hjemmeside]
;[https://simplydemowidgets.mozello.com/ Check how widgets can look like on your website]
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
= Anmeldelseswidget =
=Reviews Widget=
<br><br>
<br><br>
Wish to add reviews your clients leave on the booking page to your website?<br>
Ønsker du at tilføje anmeldelser, som dine kunder efterlader på reservationssiden, til din hjemmeside?<br>
Just follow these instructions:
Følg blot disse instruktioner:
:1. Please go to <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;">Reviews widget.</span>
:1. Gå til <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Indstillinger</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Indstillinger for booking-widgets</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Anmeldelses-widget.</span>
[[File:Reviews widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/5/5b/Reviews_widget_path_redesigned.png]]
[[File:Reviews widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/5/5b/Reviews_widget_path_redesigned.png]]
<br><br>
<br><br>
: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.  
:2. På siden kan du vælge tema, indstille farver, bestemme antallet af anmeldelser, du ønsker at vise, og om du ønsker, at dine kunder skal kunne tilføje anmeldelser ved hjælp af widgeten.  
[[File:Reviews widget settings redesigned.png|1200px| center|link=https://help.simplybook.me/images/6/6d/Reviews_widget_settings_redesigned.png]]
[[File:Reviews widget settings redesigned.png|1200px| center|link=https://help.simplybook.me/images/6/6d/Reviews_widget_settings_redesigned.png]]
<br><br>
<br><br>
:3. And now, when design is set, just click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code</span> button, copy the code and insert it to your website to the desired place.
:3. Når designet er indstillet, skal du blot klikke på knappen <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Hent widgetkode</span>, kopiere koden og indsætte den på det ønskede sted på din hjemmeside.
[[File:Get reviews widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/f/f8/Get_reviews_widget_code_redesigned.png]]
[[File:Get reviews widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/f/f8/Get_reviews_widget_code_redesigned.png]]
<br>
<br>
Congratulations! Widget is now ready, your reviews will be published and updated on your website!
Tillykke! Widgeten er nu klar, og dine anmeldelser vil blive offentliggjort og opdateret på din hjemmeside!
<br><br>
<br><br>
</div>

Latest revision as of 13:06, 22 September 2025

Other languages:


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:
Wordpress
Shopify
Joomla
Squarespace
Weebly
Go Daddy
SITE123
Se hvordan widgets kan se ud på din hjemmeside



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. Som resultat vil denne kundes oplysninger blive udfyldt på forhånd i widgeten, og kunden behøver ikke at indtaste dem.



Widgets til klientlogin, pakker, medlemskaber, gavekort



Bemærk! Det fungerer i øjeblikket kun med iFrame-widgets og fungerer ikke med widgets til bookingknapper og kontaktknapper.


Hvis du bruger en eller flere af disse funktioner, kan det være nødvendigt at tilføje en widget, der giver dine kunder mulighed for at bruge denne funktion på din hjemmeside.
Det kan gøres på en enkel måde ved at tilføje det tilsvarende "navigate" -element til widgetkoden:



Eksempel på widgetkode for gavekort:

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

Widget til bookingknap



1. Find koden til reservationsknappen på din reservationsside under Indstillinger -> Indstillinger for reservationswidget -> Reservationsknap -> Hent widgetkode.









2. Indsæt det 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:
Wordpress
Shopify
Joomla
Squarespace
Weebly
Go Daddy
SITE123
Se hvordan widgets kan se ud på din hjemmeside


Widgets med foruddefineret service, udbyder, kategori eller placering.

Denne funktion giver dig mulighed for at generere iframe-kode specifikt til den service, udbyder, kategori eller placering, du har. Hvis du f.eks. har to tjenester, A og B, og du vælger tjeneste A som foruddefineret, åbnes widgeten 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.

Widget til booking og kontakt



1. Aktivér kontaktwidget i Tilpassede funktioner -> Til udvikling.



2. Hent bookingknap-koden fra din booking-side ved at navigere til Indstillinger nær denne tilpassede funktion eller i Indstillinger i menuen til venstre -> Bookingwidget-indstillinger -> Kontaktwidget -> Hent widgetkode.







3. Indsæt det i HTML-koden <body> på din hjemmeside (eller et andet sted på din hjemmesideplatform, der er designet til at indsætte 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:
Wordpress
Shopify
Joomla
Squarespace
Weebly
Go Daddy
SITE123
Se hvordan widgets kan se ud på din hjemmeside

Anmeldelseswidget



Ønsker du at tilføje anmeldelser, som dine kunder efterlader på reservationssiden, til din hjemmeside?
Følg blot disse instruktioner:

1. Gå til Indstillinger -> Indstillinger for booking-widgets -> Anmeldelses-widget.



2. På siden kan du vælge tema, indstille farver, bestemme antallet af anmeldelser, du ønsker at vise, og om du ønsker, at dine kunder skal kunne tilføje anmeldelser ved hjælp af widgeten.



3. Når designet er indstillet, skal du blot klikke på knappen Hent widgetkode, kopiere koden og indsætte den på det ønskede sted på din hjemmeside.


Tillykke! Widgeten er nu klar, og dine anmeldelser vil blive offentliggjort og opdateret på din hjemmeside!

Retrieved from "https://help.simplybook.me/index.php?title=Widgets_for_your_own_website/da&oldid=36884"