Advanced configuration of the widget on the website:
1. General construction of the installation script:
<script src = "// widget.our.guide/sfl-widget.js" data-sfl-widget = "ID" type = "text / javascript" data-config =
'{
"parameter": "value"
} '>
</ Script>
Where "ID" is the unique ID of your guide.
List of available parameters:
display - is responsible for showing the ribbon on the page. It accepts values: true or false. Default value: true. By overriding this property in the mobile: {} parameter, we can disable the ribbon in the mobile view;
textColor - ribbon text color;
textColorHover - the color of text, borders and icons when the background gradient is set (backgroundGradient);
text - content of the text on the ribbon divided into languages (preview in the 2nd example);
backgroundColor - the background color of the ribbon;
backgroundGradient - the background color of the ribbon as a gradient, if given overwrites the backgroundColor value;
borderColor - border color;
borderGradient - border color as a gradient, if given overwrites borderColor;
iconColor - icon color;
iconGradient - the color of the icon as a gradient, if given, overwrites the iconColor value;
horizontal - option to switch the ribbon to horizontal mode, if not specified, the ribbon will be vertical;
top, right, bottom, left - options for embedding the offset of the ribbon from the given screen edge in px or%, e.g. Top: 10px and right: 0 will set the ribbon at the right edge with 10px off the top. The top and left option overrides bottom and right - in the case when we give both pairs in one configuration;
localization - set on top, right, bottom, left depending on the side to which the ribbon is to adhere, is used for mirroring and centering the textu. Can accept an array with two values, e.g. ["right", "top"];
fixed - the ribbon is glued to the screen, follows the scrol, switched on as standard;
language - the main language used when the page does not contain a "tag" of the language.
If the option is not set in the configuration, the "en" version is used.
languageFallback - alternative language, if the currently used page is not found in the language book, but the "tag" of the language will be available, this language will be used;
For example, if the address of the page is "domena.pl/ru", and language is not found in the language list ("text" parameter: {}), the languageFallback option will be used;
If the option is not set in the configuration, the "en" version is used;
languageMapping - it is language mapping, some pages use "markups" in the form of "en", "en" in this case we do not set this option. Some websites use, for example, Domen domena.pl for the version pl and domena.com.pl for the en version - in this case, the "domena.com.pl" maping is required: "en", "domena.pl": " en. "
For example, if url "domain.com.pl/test" is detected, the "en" version will be used.
languageRegexp - is a regular expression that specifies what part of the address will be used as the language "tag". The syntax constraints - http://www.gajdaw.pl/php/wyrazenia-regularne-pcre-php-tutorial/print.html. Below in the regular expressions section I will try to describe a few examples. For testing you can use https://regex101.com/r/bV3wS8/2;
languageCookie - in this value we give the name of the cookie from which the "language marker" will be taken, it is subject to maping;
defaultUrl - an option to give an additional url when opening a pop-up, allows automatic entry into the category. Default false - disabled;
languageHtml - this option is responsible for the ability to download a "language tag" from the html code, e.g. from the <html lang = "en_EN"> tag using "languageHtml": "html :: lang";
mobile - controlling the look of the mobile version. The option can take any properties from the list above, ie: top, bottom, horizontal, display, etc. These options are activated in the mobile version. The threshold to which the mobile version will be active is determined in the parameter: "mobileWidth" (default 767 inclusive);
svgIcon - optional parameter (default is 0), allows you to change the icon on the ribbon (0 - lock, 1 - pushpin);
shape - optional parameter ("ribbon" by default), allows you to change the shape of the ribbon to a square ("rect"), circle ("circle"), use with a vertical setting of the ribbon;
The color can be given in the form:
violet
rgba (0,0,0,0)
If any parameter is not specified, its default value will be used.
Below are the default values for the elements selected above:
text: "Plan your stay",
textColor: "white",
backgroundColor: "# ff304f",
borderColor: "# ff304f",
iconColor: "white",
localization: 'right',
horizontal: false,
fixed: true,
mobileWidth: 767
svgIcon: 0
shape: 'ribbon'
Regular expressions (languageRegexp)
Test tool with loaded examples - https://regex101.com/r/bV3wS8/4
The element marked in green is the language marker. It is important to modify "languageRegexp" by entering the domain into it, change each dot to "\.".
The simplest situation - a marker in the form of "pl", "en", domain "domena.pl/en/test"
"language": "en",
"languageFallback": "en",
"languageRegexp": "domain \ .pl \ / ([a-z] {2}) (\ /.*)? $",
"languageMapping": {},
Subdomain - a marker in the form of "en", "en", domain "en.domena.pl/test"
"language": "en",
"languageFallback": "en",
"languageRegexp": "^ ([a-z] {2}) \. (. *)? domain",
"languageMapping": {},
Different domains - domain "domena.pl" for pl and "domena.com.pl/test" for en
"language": "en",
"languageFallback": "en",
"languageRegexp": "domain \. ([a-z \.] *) (\ /.*)? $",
"languageMapping": {
"en": "pl",
"com.pl": "en"
},