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
 
Created page with "Exempel på widgetkod <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">för presentkort</span>:<br><br>"
Tags: Mobile edit Mobile web edit
Line 62: Line 62:
[[File:Predefined client result view.png|center]]
[[File:Predefined client result view.png|center]]
<br><br>
<br><br>
<div lang="en" dir="ltr" class="mw-content-ltr">
== Widgets för [[Client_Login_custom_feature|kundinloggning]], [[Packages_custom_feature|paket]], [[Membership_custom_feature|medlemskap]], [[Coupons_and_Gift_Cards_custom_feature|presentkort]] ==
==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;">'''Observera!''' Det fungerar för närvarande endast med iFrame-widgets och fungerar inte med bokningsknappar och kontaktknappar.</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>
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>
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ö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|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;">[[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|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;">[[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|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;">[[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|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;">[[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>
</div>
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>
<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 för bokningsknapp =
=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. Hämta bokningsknappens kod från din bokningssida i <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 bokningswidget</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Bokningsknapp</span> -&gt; <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>
</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 95: Line 88:
[[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>
<div lang="en" dir="ltr" class="mw-content-ltr">
<div lang="en" dir="ltr" class="mw-content-ltr">
: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>  
: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>