SimplyBook.me

Widgets for your own website/sv: Difference between revisions

← Older edit
VisualWikitext
Created page with ":4. Som resultat kommer kundens uppgifter att fyllas i automatiskt i widgeten och kunden behöver inte ange dem. center <br><br>"
No edit summary
 
(10 intermediate revisions by 2 users not shown)
Line 3: Line 3:




:Varför du bör använda våra widgets [[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=ngAxW1uTOk4]]
:Varför du bör använda våra widgets <p><youtube>ngAxW1uTOk4</youtube></p>
<br><br>
<br><br>
:Videohandledning tillgänglig [[File:Youtube-Logo.png|link=https://youtu.be/8mi4MCmE_qg]]
:Videohandledning tillgänglig <p><youtube>8mi4MCmE_qg</youtube></p>
<br><br>
<br><br>


Line 21: Line 21:
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Observera!''' Olika webbplatsbyggare/plattformar kan ha olika sätt att lägga till HTML-kod. Kontrollera först om din webbplats stöder infogning av HTML JavaScript-kod.</span>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Observera!''' Olika webbplatsbyggare/plattformar kan ha olika sätt att lägga till HTML-kod. Kontrollera först om din webbplats stöder infogning av HTML JavaScript-kod.</span>
:'''Här finns handledningar för flera populära webbplatsbyggare:'''
:'''Här finns handledningar för flera populära webbplatsbyggare:'''
:::[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/ Kontrollera hur widgets kan se ut på din webbplats]
;[https://simplydemowidgets.mozello.com/ Kontrollera hur widgets kan se ut på din webbplats]
Line 35: Line 34:
<br>
<br>


Med den här funktionen kan du generera iframe-kod specifikt för tjänster, leverantörer, [[Custom_Features#Service_Categories |kategorier]] eller [[Custom_Features#Multiple_Locations |platser]] som du har. Om du till exempel har två tjänster, A och B, och du väljer tjänst A som fördefinierad, öppnas widgeten för den tjänsten och steget där du väljer tjänst hoppas över. Den här funktionen kan vara användbar om du bara vill visa vissa tjänster på en specifik sida på din webbplats. Stegen för att generera koden är desamma som ovan, men i widgetens inställningar väljer du det objekt du vill fördefiniera.
Med den här funktionen kan du generera iframe-kod specifikt för tjänster, leverantörer, [[Special:MyLanguage/Service_Categories_custom_feature |kategorier]] eller [[Special:MyLanguage/Multiple_Locations_custom_feature |platser]] som du har. Om du till exempel har två tjänster, A och B, och du väljer tjänst A som fördefinierad, öppnas widgeten för den tjänsten och steget där du väljer tjänst hoppas över. Den här funktionen kan vara användbar om du bara vill visa vissa tjänster på en specifik sida på din webbplats. Stegen för att generera koden är desamma som ovan, men i widgetens inställningar väljer du det objekt du vill fördefiniera.


[[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]]
Line 62: Line 61:
[[File:Predefined client result view.png|center]]
[[File:Predefined client result view.png|center]]
<br><br>
<br><br>
== Widgets för [[Client_Login_custom_feature|kundinloggning]], [[Packages_custom_feature|paket]], [[Membership_custom_feature|medlemskap]], [[Coupons_and_Gift_Cards_custom_feature|presentkort]] ==
== Widgets för [[Special:MyLanguage/Client_Login_custom_feature|kundinloggning]], [[Special:MyLanguage/Packages_custom_feature|paket]], [[Special:MyLanguage/Membership_custom_feature|medlemskap]], [[Special:MyLanguage/Coupons_and_Gift_Cards_custom_feature|presentkort]] ==
<br><br>
<br><br>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Observera!''' Det fungerar för närvarande endast med iFrame-widgets och fungerar inte med bokningsknappar och kontaktknappar.</span><br>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Observera!''' Det fungerar för närvarande endast med iFrame-widgets och fungerar inte med bokningsknappar och kontaktknappar.</span><br>
Line 68: Line 67:
Om du använder en eller flera av dessa funktioner kan det vara nödvändigt att lägga till en widget som gör att dina kunder kan använda alternativet på din webbplats.<br>
Om du använder en eller flera av dessa funktioner kan det vara nödvändigt att lägga till en widget som gör att dina kunder kan använda alternativet på din webbplats.<br>
Det kan göras på ett enkelt sätt genom att lägga till motsvarande <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">"navigera"</span> -element i widgetkoden:
Det kan göras på ett enkelt sätt genom att lägga till motsvarande <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">"navigera"</span> -element i widgetkoden:
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Client_Login_custom_feature|Kundinloggning]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigera":"client/sign-in"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Client_Login_custom_feature|Kundinloggning]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigera":"client/sign-in"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Packages_custom_feature|Paket]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigera":"packages"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Packages_custom_feature|Paket]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigera":"packages"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Membership_custom_feature|Medlemskap]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigera":"membership"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Membership_custom_feature|Medlemskap]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigera":"membership"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Coupons_and_Gift_Cards_custom_feature|Presentkort]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigera":"gift-card"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Coupons_and_Gift_Cards_custom_feature|Presentkort]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigera":"gift-card"</span>
<br><br>
<br><br>
Exempel på widgetkod <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Coupons_and_Gift_Cards_custom_feature|för presentkort]]</span>:<br><br>
Exempel på widgetkod <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Coupons_and_Gift_Cards_custom_feature|för presentkort]]</span>:<br><br>
<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>
Line 91: Line 90:
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Observera!''' Olika webbplatsbyggare/plattformar kan ha olika sätt att lägga till HTML-kod. Kontrollera först om din webbplats stöder infogning av HTML JavaScript-kod.</span>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Observera!''' Olika webbplatsbyggare/plattformar kan ha olika sätt att lägga till HTML-kod. Kontrollera först om din webbplats stöder infogning av HTML JavaScript-kod.</span>
:'''Här finns handledningar för flera populära webbplatsbyggare:'''
:'''Här finns handledningar för flera populära webbplatsbyggare:'''
:::[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/ Kontrollera hur widgets kan se ut på din webbplats]
;[https://simplydemowidgets.mozello.com/ Kontrollera hur widgets kan se ut på din webbplats]
Line 104: Line 102:


;Widgets med fördefinierad tjänst, leverantör, kategori eller plats.
;Widgets med fördefinierad tjänst, leverantör, kategori eller plats.
Med den här funktionen kan du generera iframe-kod specifikt för tjänster, leverantörer, [[Custom_Features#Service_Categories |kategorier]] eller [[Custom_Features#Multiple_Locations |platser]] som du har. Om du till exempel har två tjänster, A och B, och du väljer tjänst A som fördefinierad, öppnas widgeten för den tjänsten och steget där du väljer tjänst hoppas över. Denna funktion kan vara användbar om du bara vill visa vissa tjänster på en specifik sida på din webbplats. Stegen för att generera koden är desamma som ovan, men i widgetens inställningar väljer du det objekt du vill fördefiniera.
Med den här funktionen kan du generera iframe-kod specifikt för tjänster, leverantörer, [[Special:MyLanguage/Service_Categories_custom_feature |kategorier]] eller [[Special:MyLanguage/Multiple_Locations_custom_feature |platser]] som du har. Om du till exempel har två tjänster, A och B, och du väljer tjänst A som fördefinierad, öppnas widgeten för den tjänsten och steget där du väljer tjänst hoppas över. Denna funktion kan vara användbar om du bara vill visa vissa tjänster på en specifik sida på din webbplats. Stegen för att generera koden är desamma som ovan, men i widgetens inställningar väljer du det objekt du vill fördefiniera.
<br><br>
<br><br>


<div lang="en" dir="ltr" class="mw-content-ltr">
= Widget för bokning och 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. Aktivera <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;">Anpassade funktioner</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">För utveckling</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. Hämta bokningsknappens kod från din bokningssida genom att navigera till <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Inställningar</span> nära denna anpassade funktion eller i <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Inställningar</span> i menyn till vänster -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Inställningar för bokningswidgets</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;">Hämta widgetkod.</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. Infoga den i HTML-koden <body> på din webbplats (eller någon annan plats på din webbplattform som är avsedd för att infoga HTML JavaScript iFrame-kod). <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;">'''Observera!''' Olika webbplatsbyggare/plattformar kan ha olika sätt att lägga till HTML-kod. Kontrollera först om din webbplats stöder infogning av HTML JavaScript-kod.</span>
:'''Here are tutorials for several popular website builders:'''
:'''Här finns handledningar för flera populära webbplatsbyggare:'''
:::*[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/ Kontrollera hur widgets kan se ut på din webbplats]
;[https://simplydemowidgets.mozello.com/ Check how widgets can look like on your website]
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
= Recensionswidget =
=Reviews Widget=
<br><br>
<br><br>
Wish to add reviews your clients leave on the booking page to your website?<br>
Vill du lägga till recensioner som dina kunder lämnar på bokningssidan till din webbplats?<br>
Just follow these instructions:
Följ bara dessa 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å till <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Inställningar</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Inställningar för bokningswidgets</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Recensionswidget.</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å sidan kan du välja tema, ställa in färger, bestämma hur många recensioner du vill visa och om du vill att dina kunder ska kunna lägga till recensioner med hjälp av 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 designen är klar klickar du bara på knappen <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Hämta widgetkod</span>, kopierar koden och klistrar in den på önskad plats på din webbplats.
[[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!
Grattis! Widgeten är nu klar och dina recensioner kommer att publiceras och uppdateras på din webbplats!
<br><br>
<br><br>
</div>
Retrieved from "https://help.simplybook.me/index.php?title=Widgets_for_your_own_website/sv"