DirectBistro – Virtual Menu

1. Wstęp

Virtual Menu DirectBistro umożliwia łatwe wdrożenie systemu zamawiania online na stronie internetowej restauracji. Umożliwia zarządzanie menu z poziomu Panelu Administracyjnego POSbistro. W każdej chwili i z dowolnego miejsca restaurator może samodzielnie dokonać zmian, które będą widoczne na stronie lokalu w czasie do 15 minut. Virtual Menu umożliwia dopasowanie kolorystyki i czcionki do identyfikacji wizualnej restauracji, a także dodanie spersonalizowanych zdjęć i opisów potraw. Wprowadzenie systemu zamówień online na stronie odciąży zajętą linię telefoniczną oraz wyeliminuje błędy podczas notowania. Klient może wygodnie złożyć zamówienie, które zostanie przesłane bezpośrednio na terminal sprzedażowy POSbistro. Otrzyma potwierdzenie zamówienia w czasie rzeczywistym, a także dostęp do historii zamówień. Dzięki Virtual Menu DirectBistro w prostu sposób można uruchomić program lojalnościowy bezpośrednio na stronie restauracji. Najbardziej popularny, prosty we wprowadzeniu i dobrze przyjęty program lojalnościowy to 1 punkt dla klienta za każde wydane 10 zł w lokalu. Każdy uzbierany punkt to 1 zł do wydania w lokalu na kolejne zakupy, więcej szczegółów po kliknięciu w LINK.

2. Dodawanie wpisu DNS na domenie

Ze względu na dodanie nowych zabezpieczeń związanych z prywatnością w przeglądarce Safari oraz w niedalekiej przyszłości w pozostałych przeglądarkach niezbędne jest dodanie na Państwa domenie wpisu DNS. Brak wpisu będzie skutkował niemożliwością złożenia zamówienia przez klientów posiadających urządzenia iOS z przeglądarką Safari (w przyszłości również innych urządzeniach i przeglądarkach).

widget-directbistro.moja-restauracja.pl IN A 54.74.92.71

W tym celu zalecamy kontakt z operatorem Państwa domeny, który przekaże instrukcję dodania wpisu lub wprowadzi go w Państwa imieniu. Jeżeli wszystko przebiegło prawidłowo, prosimy o kontakt z pomoc@posbistro.com w celu weryfikacji. W wiadomości koniecznie prosimy o podanie nazwy domeny, do której dodano nowy rekord. W odpowiedzi otrzymają Państwo pełny kod Virtual Menu. Tekst czerwoną czcionką oznacza adres Państwa strony internetowej.

Instrukcje dodawania wpisu u poszczególnych dostawców:

• Nazwa.pl
• Home.pl
• Cyberfolks.pl

3. Dodawanie wpisu DNS na domenie home.pl

Logujemy się na stronie https://panel.home.pl/ i wybieramy w menu po lewej stronie zakładkę Domeny. Następnie przy domenie po prawej stronie, na której będzie umieszczony widget klikamy Opcje i wybieramy Zarządzaj rekordami DNS.

Klikamy przycisk Dodaj nowy rekord.

W okienku pop-up wypełniamy kolejno:

• Typ rekordu: A
• Adres IPv4: 54.74.92.71
• Host: widget-directbistro
• TTL: (opcjonalnie)

Następnie potwierdzamy przyciskiem OK. Jeżeli wszystko przebiegło prawidłowo, prosimy o kontakt z pomoc@posbistro.com w celu weryfikacji. W wiadomości koniecznie prosimy o podanie nazwy domeny, do której dodano nowy rekord. W odpowiedzi otrzymają Państwo pełny kodu widgetu.

4. Dodawanie kodu na stronie internetowej

4.1 Wersja sprzedaż online

W celu umożliwienia zamawiania online niezbędne jest wprowadzenie kodu html na stronie internetowej lokalu. Krok ten musi być poprzedzony aktywacją usługi DirectBistro w Panelu Administracyjnym POSbistro (więcej szczegółów po kliknięciu w LINK) oraz dodaniem wpisu DNS zgodnie z punktem 2 poradnika. Poprawny kod Virtual Menu otrzymają Państwo na e-mail. Przykładowy kod do wprowadzenia na stronie:

<div id='db-root-widget'></div>
<script>                    
  window.dbLang = "pl";
  window.locationId = "aaaaaaa-1234-cccc-dddd-123456789";
  window.dbApiPath="https://widget-directbistro.moja-restauracja.pl/api/public/";
</script>
<script src='https://widget-cdn.directbistro.com/js/main.js'></script>

W sekcji window.locationId (czerwona czcionka) znajduje się unikalne ID lokalizacji. Kod widgetu z ID lokalu (bez sekcji window.dbApiPath) można skopiować z Panelu Administracyjnego po wybraniu kolejno: Ustawienia → DirectBistro → Widget. Z kolei w sekcji window.dbApiPath – tekst czerwoną czcionką oznacza adres Państwa strony internetowej.

Przykład Virtual Menu z domyślnymi ustawieniami TUTAJ

Istnieje też możliwość ukrycia zdjęć pozycji menu w tym celu należy dodać w kodzie wiersz window.enableImages = false;

Przykład Virtual Menu z ukrytymi zdjęciami pozycji menu TUTAJ.

W przypadku nietypowego układu czy szablonu strony internetowej w celu doboru optymalnego układu graficznego może się pojawić konieczność modyfikacji zaawansowanych ustawień Virtual Menu przez osobę posiadającą odpowiednie kwalifikacje tzn. znająca zasady działania CSS i HTML. Po każdej modyfikacji należy sprawdzić czy wszystkie treści są odpowiednio wyświetlane na urządzeniach stacjonarnych (orientacja pozioma) oraz urządzeniach mobilnych (orientacja pionowa). Testy najlepiej wykonać na kilku różnych przeglądarkach (Chrome, Mozilla, Safari, Opera, Edge) w najpopularniejszych systemach operacyjnych (Windows, Android, iOS, Linux).

4.2 Wersja tylko przeglądaj

W przypadku gdy lokal nie umożliwia zakupów online ale chce udostępnić na stronie internetowej menu oraz udostępnić klientom możliwość przeglądania cyfrowej wersji menu po zeskanowaniu kodu QR umieszczonego w widocznym miejscu należy dodać widget zgodnie z punktem 4.1 oraz w kodzie dodać wiersz: window.showSidebar = false; aby ukryć widok koszyka.

Przykładowy kod do wprowadzenia na stronie:

<div id='db-root-widget'></div>
<script>                    
  window.dbLang = "pl";
  window.showSidebar = false;
  window.locationId = "aaaaaaa-1234-cccc-dddd-123456789";
  window.dbApiPath="https://widget-directbistro.moja-restauracja.pl/api/public/";
</script>
<script src='https://widget-cdn.directbistro.com/js/main.js'></script>

W sekcji window.locationId (czerwona czcionka) znajduje się unikalne ID lokalizacji. Kod widgetu z ID lokalu (bez sekcji window.dbApiPath) można skopiować z Panelu Administracyjnego po wybraniu kolejno: Ustawienia → DirectBistro → Widget. Z kolei w sekcji window.dbApiPath – tekst czerwoną czcionką oznacza adres Państwa strony internetowej. Więcej informacji na temat sposobów wykorzystania QR menu po kliknięciu w LINK. Istnieje też możliwość ukrycia zdjęć pozycji menu w tym celu należy dodać w kodzie wiersz window.enableImages = false;

Przykład Virtual Menu w wersji przeglądaj gdzie zostały ukryte zdjęcia potraw TUTAJ.

5. Dodawanie Virtual Menu do strony w WordPress

W celu dodania Virtual Menu menu do strony w WordPress należy wykonać następujące kroki:

1. Zalogować się do panelu administracyjnego w swojej witrynie WordPress, a następnie przejść do karty Strony i wybrać Dodaj nową. 
2. Wpisać tytuł strony i wybrać opcję Tekst w oknie edycji tekstu.
3. Skopiować kod z punktu 2 tej instrukcji (należy pamiętać o wprowadzeniu prawidłowego ID lokalizacji, czerwona czcionka).
4. Wkleić fragmenty kodu do edytora tekstu w panelu administracyjnym WordPress. Następnie opublikować powiązaną stronę i zakładkę z nową podstroną w witrynie WordPress.
5. W razie potrzeby opakować przesłany kod innym divem ze stylem min-width=700px lub wyższym. Virtual Menu do poprawnego wyświetlania potrzebuje szerszego layoutu.

W przypadku nietypowego układu czy szablonu strony WordPress w celu doboru optymalnego układu graficznego może się pojawić konieczność modyfikacji zaawansowanych ustawień Virtual Menu (widgetu) przez osobę posiadająca odpowiednie kwalifikacje tzn. znająca zasady działania CSS i HTML. Po każdej modyfikacji należy sprawdzić czy wszystkie treści są odpowiednio wyświetlane na urządzeniach stacjonarnych (orientacja pozioma) oraz urządzeniach mobilnych (orientacja pionowa). Testy najlepiej wykonać na kilku różnych przeglądarkach (Chrome, Mozilla, Safari, Opera, Edge) w najpopularniejszych systemach operacyjnych (Windows, Android, iOS, Linux).

6. Zaawansowane ustawienia Virtual Menu

6.1 Pozycja kodu HTML Virtual Menu (widgetu).

Widget należy umieścić w kontenerze lub bez kontenera pomiędzy nagłówkiem a stopką np:

<header></header><div class=”twoj-kontener”><div 
id='db-root-widget'></div></div><footer></footer>

lub bez kontenera:

<header></header><div id='db-root-widget'></div><footer></footer>

Dla poprawnego działania i wyświetlania widgetu, zarówno w wersji desktopowej, jak i wersji mobilnej, zaleca się, by kontener widgetu wraz z rodzicami, w którym zostanie umieszczony, nie posiadał ograniczeń maksymalnej oraz minimalnej szerokości (width).

Jeśli stosujemy na stronie kontenery, które utrzymują maksymalną szerokość w zadanej wartości, możemy umieścić widget wewnątrz takiego kontenera, należy jednak pamiętać, by kontener ten dla urządzeń mobilnych nie ograniczał szerokości oraz by jego szerokość maksymalna nie była mniejsza niż 1024px – przy tej szerokości ekranu widget przechodzi w tryb mobilny (tablet).

Widget sam trzyma maksymalną szerokość na elemencie .db-root > main > div  (selektor CSS) odpowiednio: max-width: 1344px; dla @media (min-width: 1408px); 1152px dla @media (min-width: 1152px); 960px dla @media (min-width: 1024px) i ustawi się na środku strony (wycentruje).

Posiada również odstępy (padding-left: 25px; padding-right: 25px;) z prawej i lewej strony 25px (zatem łączna maksymalna szerokość widgetu to: 1394px), nie zaleca się również dodawania własnych odstępów z prawej i lewej strony w kontenerach.

Należy pamiętać, że widget dla swojego ciała nie posiada tła (jest przezroczysty).

Widget DirectBistro umożliwia spersonalizowanie układu graficznego systemu zamawiania online poprzez edycję zmiennych CSS. Przykładowy wygląd strony po zastosowaniu ustawień zaawansowanych:

• https://posbistro.com/poradnik/directbisto_widget_default_example.html
• https://posbistro.com/poradnik/directbisto_widget_blue_example.html
• https://posbistro.com/poradnik/directbisto_widget_contrast_example.html

6.2 Ogólne założenia.

• Tło widgetu jest przezroczyste (transparentne) w przeglądarkach obsługujących CSS variables. Umożliwia to zastosowanie dowolnego tła strony, a cień zastosowany w boksach widgetu będzie nachodził na tło strony (zalecamy używanie tła w elemencie <body>),
• Dla całego widgetu stosowane są CSS variables, każdą zmienną można nadpisać swoim kolorem lub inną poprawną wartością poprzez wpisanie jej w tagu <style> w następujący sposób:

<style>
	:root {
  	  --db-<nazwa-zmiennej>: <wartość> !important;
	}
</style>

• część ustalonych zmiennych standardowo będzie dziedziczyć po sobie ustawienia wg ustalonego schematu, jednak te wartości również można nadpisać jeśli jest taka potrzeba,

• do widgetu dołączonych jest 5 czcionek: 'Blinker’, 'Oswald’, 'Lato’, 'Archivo’, 'Source Sans Pro’ można je definiować jako nagłówki oraz 3 czcionki: 'Lato’, 'Archivo’, 'Source Sans Pro’ można je definiować jako treści zwyczajne. Nie zaleca się używanie czcionek dla nagłówków w treści zwyczajnej, ani dołączanie innych czcionek spoza tej listy,

• zmienne dzielimy na podstawową serię, zmienne kolorów, i rozszerzoną serię (dziedziczącą po podstawowej) – zmienne te mają w wartości domyślnie przypisaną inną zmienną poprzez var(<nazwa>), ten sam model można stosować przy własnych modyfikacjach,

• możliwa jest zmiana wszystkich kolorów i wartości cieni i przezroczystości w widgecie wraz z zachowaniem stanu (:hover / :focus),

• zmienne dzielą się na 5 sekcji: podstawową typografię, kolory stanów, kolory boksów, kolory przycisków (cta), kolory formularzy (input).

6.3 Główne zmienne zalecane przy znacznej modyfikacji tła widgetu.

6.3.1 typografia

  --db-header-font: 'Lato'; /* ( 'Blinker', 'Oswald', 'Lato', 'Archivo', 'Source Sans Pro') czcionka tekstów nagłówków i sekcji specjalnych, 'Lato' domyślnie */
  --db-body-font: 'Lato'; /* ('Lato', 'Archivo', 'Source Sans Pro') czcionka wszystkich innych treści na stronie 'Lato' domyślnie */
  --db-body-font-color: #{$text}; /* kolor czcionki dla widgetu, czarny domyślnie */
  --db-body-font-color-mute: #{$grey}; /* kolor dla wartości wyszarzonych, szary domyślnie */
  --db-body-font-color-link: #{$link}; /* kolory linków,pomarańczowy domyślnie */
  --db-body-font-color-link-darken: #{$link-dark}; /* kolory linków po najechaniu myszką, ciemny pomarańczowy domyślnie */

6.3.2 kolory stanów i statusów

  --db-close-color: #C1005A; /* lokal otwarty */
  --db-open-color: #{$focus}; /* lokal zamknięty */
  --db-border-color: #{$tile-border-color}; /* kolor obramowania */
  --db-focus-color: #{$focus}; /* kolor elementu UI na którym skupiony jest kursor  */
  --db-focus-color-opacity: #{rgba($focus, 0.4)}; /* skupienie z przezroczystością */
  --db-active-color-opacity: #{rgba($focus, 0.4)}; /* element aktywny z przezroczystością */
  --db-checked-color: #{$focus}; /* kolor zaznaczonego elementu menu */
  --db-lock-color: #{$focus}; /* kolor niedostępnego dla zmiany elementu menu */
  --db-success-color: #{$green};  /* kolor komunikatu powodzenia */
  --db-warning-color: #{$red}; /* kolor komunikatu niepowodzenia */
  --db-state-contrast-color: #{$white}; /* kolor kontrastowy dla komunikatu */

6.3.3 boksy oraz dziedziczące formularze

  --db-box-background-color: #{$box-background-color}; /* tło boksów */
  --db-box-background-color-light: #F6F6F6; /* tło alternatywne dla boksu */
  --db-box-shadow: #{$box-shadow}; /* cień boksu */
  --db-box-border-width: 1px; /* szerokość obramowania */

6.4 Opcjonalnie – wszystkie dostępne zmienne.

6.4.1 zmienne sekcja typografia

  --db-header-font: 'Lato'; /* ( 'Blinker', 'Oswald', 'Lato', 'Archivo', 'Source Sans Pro') czcionka tekstów nagłówków i sekcji specjalnych, 'Lato' domyślnie */
  --db-body-font: 'Lato'; /* ('Lato', 'Archivo', 'Source Sans Pro') czcionka wszystkich innych treści na stronie 'Lato' domyślnie */
  --db-body-font-color: #{$text}; /* kolor czcionki dla widgetu, czarny domyślnie */
  --db-body-font-color-mute: #{$grey}; /* kolor dla wartości wyszarzonych, szary domyślnie */
  --db-body-font-color-link: #{$link}; /* kolory linków,pomarańczowy domyślnie */
  --db-body-font-color-link-darken: #{$link-dark}; /* kolory linków po najechaniu myszką, ciemny pomarańczowy domyślnie */
  --db-body-icon-color: var(--db-body-font-color-link); /* kolor ikon, domyślnie dziedziczy po kolorze linków (nie trzeba podawać) */

6.4.2 zmienne sekcja stanów

  --db-close-color: #C1005A; /* status zamknięty */
  --db-open-color: #{$focus}; /* status otwarty */
  --db-border-color: #{$tile-border-color}; /* kolor obramowań */
  --db-focus-color: #{$focus}; /* kolor zaznaczonego pola lub skupionego (focus) */
  --db-focus-color-opacity: #{rgba($focus, 0.4)}; /* kolor zaznaczony przezroczysty */
  --db-active-color: var(--db-body-font-color-link); /* kolor aktywne pole */
  --db-active-color-opacity: #{rgba($focus, 0.4)}; /* kolor aktywny przezroczysty */
  --db-checked-color: #{$focus};  /* kolor wybranej opcji */
  --db-lock-color: #{$focus}; /* kolor zablokowanej opcji */
  --db-success-color: #{$green};  /* kolor tła powiadomienia, powodzenie */
  --db-warning-color: #{$red}; /* kolor tła powiadomienia, niepowodzenie */
  --db-state-contrast-color: #{$white};  /* kolor kontrastowy dla powiadomień (kolor czcionki) */

6.4.3 zmienne sekcja: boksów

  --db-box-background-color: #{$box-background-color};  /* kolor tła boksu oraz modala  */
  --db-box-background-color-light: #F6F6F6; /* wyróżniona sekcja w boksie (wyszarzona) */
  --db-box-header-background-color: var(--db-box-background-color-light);
  --db-box-header-background-color-close: var(--db-box-background-color);  
  --db-box-header-font-color: var(--db-body-font-color);  
  --db-box-font-color: var(--db-body-font-color); 
  --db-box-font-color-mute: var(--db-body-font-color-mute);    
  --db-box-font-color-mute-darken: #b5b5b5;
  --db-box-font-color-link: var(--db-body-font-color-link);    
  --db-box-font-color-link-darken: var(--db-body-font-color-link-darken);    
  --db-box-shadow: #{$box-shadow}; 
  --db-box-border-color: var(--db-border-color);
  --db-box-border-width: 1px; 
  --db-box-focus-color: var(--db-focus-color);
  --db-box-icon-color: var(--db-box-font-color-link); 

6.4.4 zmienne sekcja: Przyciski

  --db-cta-font-color: var(--db-box-background-color); /* kolor czcionki w przycisku wiodącym */
  --db-cta-font-color-darken: #{darken($white, 5%)};
  --db-cta-background: var(--db-body-font-color-link); /* tło w przycisku wiodącym */
  --db-cta-background-darken: var(--db-body-font-color-link-darken);   
  --db-cta-border: var(--db-body-font-color-link); /* obramowanie w przycisku wiodącym */

6.4.5 zmienne sekcja: Formularze

  --db-input-font-color: var(--db-body-font-color);  
  --db-input-font-color-darken: var(--db-input-font-color);      
  --db-input-border: var(--db-border-color); 
  --db-input-border-darken: var(--db-border-color); 
  --db-input-background: var(--db-box-background-color);    
  --db-input-border-focus: var(--db-body-font-color-link);  

6.5 Zastosowane zmienne na elementach widgetu.

Podkreślone wartości, są wartościami, które końcowo ustawiane są na elemencie, dziedziczą one je po innych zmiennych ustawianych globalnie, dlatego nie trzeba modyfikować ich wszystkich jeśli nie ma takiej potrzeby.

6.5.1 nagłówek boksu

   --db-header-font: 'Lato';  /* czcionka nagłówka */
  --db-box-header-font-color: var(--db-body-font-color); /* kolor nagłówka boxu */
  --db-box-header-background-color: var(--db-box-background-color-light); /* kolor tła nagłówka boxu */

6.5.2 nawigacja i koszyk

  --db-cta-font-color: var(--db-box-background-color);  /* kolor tekstu przycisku wiodącego oraz informacji o zalogowaniu */
  --db-cta-background: var(--db-body-font-color-link);  /* tło przycisku i informacji o logowaniu */
  --db-header-font: 'Lato'; /* czcionka nagłówka koszyka, kwot i opisów sum w koszyku */

6.5.3 zawartość boksu

  --db-box-background-color: #{$box-background-color}; /* tło boxu */
  --db-box-shadow: #{$box-shadow}; /* cień boxu */
  --db-box-border-color: var(--db-border-color); /* kolor obramowania boxu */
  --db-box-icon-color: var(--db-box-font-color-link); /* kolor ikony w nagłówku */
  --db-box-border-width: 1px;  /* grubość obramowania boxu */
  --db-cta-font-color: var(--db-box-background-color); /* kolor czcionki na przycisku wiodącym */
  --db-cta-font-color-darken: #{darken($white, 5%)}; /* ciemny kolor czcionki na przycisku wiodącym */
  --db-cta-background: var(--db-body-font-color-link); /* tło na przycisku wiodącym */
  --db-cta-background-darken: var(--db-body-font-color-link-darken); /* ciemne tło na przycisku wiodącym */
  --db-cta-border: var(--db-body-font-color-link); /* obramowanie na przycisku wiodącym */

6.5.4 modal i jego zawartość

  --db-box-background-color: #{$box-background-color}; /* tło modala */
  --db-box-font-color: var(--db-body-font-color); /* kolor czcionki modala */
  --db-box-font-color-mute: var(--db-body-font-color-mute); /* wyszarzona opcja */
  --db-checked-color: #{$focus}; /* kolor wybranej opcji */
  --db-lock-color: #{$focus}; /* kolor zablokowanej opcji */

  --db-body-font-color-link: #{$link}; /* kolor przycisku zamknięcia modalu (x) */
  --db-header-font: 'Lato'; /* czcionka nagłówków i kwot */
  --db-body-font: 'Lato'; /* czcionka opisów */

6.5.5 zamówienie i pola wyboru

  --db-cta-font-color: var(--db-box-background-color); /* kolor czcionki na przycisku wiodącym, zaznaczone pole typu radio button */
  --db-cta-font-color-darken: #{darken($white, 5%)}; /* ciemny kolor czcionki na przycisku wiodącym */
  --db-cta-background: var(--db-body-font-color-link); /* tło na przycisku wiodącym */
  --db-cta-background-darken: var(--db-body-font-color-link-darken); /* ciemne tło na przycisku wiodącym */
  --db-cta-border: var(--db-body-font-color-link); /* obramowanie na przycisku wiodącym */
  --db-box-background-color: #{$box-background-color};  /* tło boksa wyboru */
  --db-box-font-color: var(--db-body-font-color); /* kolor czcionki boksa wyboru */

6.5.6 formularze

  --db-input-font-color: var(--db-body-font-color); /* kolor czcionki inputów */
  --db-input-font-color-darken: var(--db-input-font-color); /* ciemny kolor czcionki */
  --db-input-border: var(--db-border-color); /* obramowanie inputów */
  --db-input-border-darken: var(--db-border-color); /* ciemne obramowanie */
  --db-input-background: var(--db-box-background-color); /* tło inputów  */  
  --db-input-border-focus: var(--db-body-font-color-link); /* focus na inputach */

6.5.7 podsumowanie zamówienia

  --db-box-font-color: var(--db-body-font-color); /* kolor tekstów w boksach
  --db-box-font-color-mute: var(--db-body-font-color-mute); /* kolor tekstów wyszarzonych w boksach (akcent)
  --db-box-border-color: var(--db-border-color); /* kolor obramowania boxu
  --db-box-icon-color: var(--db-box-font-color-link); /* kolor ikony w nagłówku
  --db-box-border-width: 1px;  /* grubość obramowania boxu

6.5.8 historia zamówienia

  --db-header-font: 'Lato'; czcionka nagłówków i kwot
  --db-body-font: 'Lato'; czcionka opisów
  --db-box-font-color: var(--db-body-font-color); kolor tekstów w boksach
  --db-box-font-color-mute: var(--db-body-font-color-mute); kolor tekstów wyszarzonych w boksach (akcent)

6.5.9 Profil i taby

  --db-box-background-color: #{$box-background-color}; /* tło tabu
  --db-box-font-color: var(--db-body-font-color); /* kolor textu w tabie
  --db-box-font-color-mute: var(--db-body-font-color-mute); /* obramowanie tabu
  --db-active-color: var(--db-body-font-color-link); /* obramowanie aktywnego tabu

6.6 Ustawienia domyślne dla zmiennych

 #{$black}:    #000;
 #{$grey}:     #616161;
 #{$white}:    #ffffff;
 #{$orange}:   #FF5900;
 #{$cyan}:     #f9dc3e;
 #{$green}:    #48974B;
 #{$blue}:     #00ACC1;
 #{$purple}:   #f93e84;
 #{$red}:      #D50151;
 #{$focus}:    $orange;
 #{$link}:     $orange;
 #{$text}:     $black;
 #{$box-background-color}: $white;
 #{$tile-border-color}: #E6E6E6;

7. Dodatkowe informacje

7.1 Pozostałe informacje i dane kontaktowe

Informacje zamieszczone w niniejszej instrukcji mają charakter wyłącznie informacyjny i nie stanowią oferty handlowej w rozumieniu Kodeksu Cywilnego. Producent zastrzega sobie prawo zmiany danych, parametrów i sposobu działania funkcji zawartych w niniejszej instrukcji bez wcześniejszego uprzedzenia.

Dane kontaktowe POSbistro dostępne są pod linkiem: www.posbistro.com/pl/kontakt.

7.2 Szkolenia dotyczące systemu POSbistro

Zachęcamy do skorzystania z bezpłatnych oraz dodatkowych szkoleń, a także do zapoznania się z materiałami dydaktycznymi dostępnymi w Akademii POSbistro pod adresem: https://akademia.posbistro.com/.
Rekomendujemy również obejrzenie filmów instruktażowych na naszym kanale YouTube, dostępnym po kliknięciu w udostępniony LINK.

W celu umówienia terminu szkolenia prosimy o kontakt z Biurem Obsługi Klienta:
tel.: 503 708 001, wew. 1 → 2
e-mail: bok@posbistro.com