Widgets for your own website/sv: Difference between revisions
Created page with ";[https://simplydemowidgets.mozello.com/ Kontrollera hur widgets kan se ut på din webbplats] <br><br>" Tags: Mobile edit Mobile web edit |
No edit summary |
||
| (13 intermediate revisions by 2 users not shown) | |||
| Line 3: | Line 3: | ||
:Varför du bör använda våra widgets | :Varför du bör använda våra widgets <p><youtube>ngAxW1uTOk4</youtube></p> | ||
<br><br> | <br><br> | ||
:Videohandledning tillgänglig | :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:''' | ||
:::[ | :::*[[Special:MyLanguage/WordPress_integration |Wordpress]] | ||
:::[ | :::*[[Special:MyLanguage/Shopify |Shopify]] | ||
:::[ | :::*[[Special:MyLanguage/Joomla_integration |Joomla]] | ||
:::[ | :::*[[Special:MyLanguage/Squarespace |Squarespace]] | ||
:::*[[Special:MyLanguage/Weebly |Weebly]] | |||
:::[ | :::*[[Special:MyLanguage/Go_Daddy |Go Daddy]] | ||
:::[ | :::*[[Special:MyLanguage/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, [[ | 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 [[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]] == | |||
==Widgets | |||
<br><br> | <br><br> | ||
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">''' | <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> | ||
<br><br> | <br><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: | |||
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Client_Login_custom_feature| | *<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| | *<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| | *<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| | *<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;">[[Special:MyLanguage/Coupons_and_Gift_Cards_custom_feature|för presentkort]]</span>:<br><br> | |||
<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Coupons_and_Gift_Cards_custom_feature| | |||
<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> | ||
= Widget för bokningsknapp = | |||
<br><br> | <br><br> | ||
:1. | :1. Hämta bokningsknappens kod från din bokningssida i <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Inställningar</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Inställningar för bokningswidget</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Bokningsknapp</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Hämta widgetkod.</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> | ||
[[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 95: | 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> | ||
:2. 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;">'''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> | |||
:2. | :'''Här finns handledningar för flera populära webbplatsbyggare:''' | ||
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">''' | :::*[[Special:MyLanguage/WordPress_integration |Wordpress]] | ||
:''' | :::*[[Special:MyLanguage/Shopify |Shopify]] | ||
:::*[ | :::*[[Special:MyLanguage/Joomla_integration |Joomla]] | ||
:::*[ | :::*[[Special:MyLanguage/Squarespace |Squarespace]] | ||
:::*[ | :::*[[Special:MyLanguage/Weebly |Weebly]] | ||
:::*[ | :::*[[Special:MyLanguage/Go_Daddy |Go Daddy]] | ||
:::*[[Special:MyLanguage/SITE123_integration |SITE123]] | |||
:::*[ | |||
:::*[ | |||
:::*[ | |||
;[https://simplydemowidgets.mozello.com/ Kontrollera hur widgets kan se ut på din webbplats] | |||
;[https://simplydemowidgets.mozello.com/ | |||
;Widgets med fördefinierad tjänst, leverantör, kategori eller plats. | |||
;Widgets | 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> | ||
= Widget för bokning och kontakt = | |||
<br><br> | <br><br> | ||
:1. | :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> -> <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. | :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 -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Inställningar för bokningswidgets</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Kontaktwidget</span> -> <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> | ||
[[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. | :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;">''' | <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:''' | ||
:::*[ | :::*[[Special:MyLanguage/WordPress_integration |Wordpress]] | ||
:::*[ | :::*[[Special:MyLanguage/Shopify |Shopify]] | ||
:::*[ | :::*[[Special:MyLanguage/Joomla_integration |Joomla]] | ||
:::*[ | :::*[[Special:MyLanguage/Squarespace |Squarespace]] | ||
:::*[[Special:MyLanguage/Weebly |Weebly]] | |||
:::*[ | :::*[[Special:MyLanguage/Go_Daddy |Go Daddy]] | ||
:::*[ | :::*[[Special:MyLanguage/SITE123_integration |SITE123]] | ||
:::*[ | |||
;[https://simplydemowidgets.mozello.com/ Kontrollera hur widgets kan se ut på din webbplats] | |||
;[https://simplydemowidgets.mozello.com/ | |||
= Recensionswidget = | |||
<br><br> | <br><br> | ||
Vill du lägga till recensioner som dina kunder lämnar på bokningssidan till din webbplats?<br> | |||
Följ bara dessa instruktioner: | |||
:1. | :1. Gå till <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Inställningar</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Inställningar för bokningswidgets</span> -> <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. | :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. | :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> | ||
Grattis! Widgeten är nu klar och dina recensioner kommer att publiceras och uppdateras på din webbplats! | |||
<br><br> | <br><br> | ||