Integracja KSI CRM z własną stroną WWW

Jeśli chciałbyś dać swoim Klientom możliwość rezerwowania ofert w systemie rezerwacyjnym KSI CRM ale masz już swoją własną stronę internetową i nie chcesz jej modyfikować to ten poradnik jest dla Ciebie.
Opisany jest tutaj najłatwiejszy sposób integracji KSI CRM z dowolną stroną internetową i ofertami, które już na niej się znajdują.
Aby to zrobić trzeba posiadać dostęp do edycji swojego serwisu czy za pośrednictwem CMS lub bezpośrednio przez FTP oraz minimalną wiedzę dotyczącą wstawiania na stronę kodu HTML. Jeśli osobiście nie czujecie się Państwo na siłach to z pewnością pomoże Wam w tym osoba, która przygotowała Wasz serwis WWW.

Opisany poniżej sposób itegracji daje możliwości takie jak:

Umieszczenie guzika wywołującego formularz rezerwacji lub zapytania do wybranej oferty.
Umieszczenie guzika wywołującego listę terminów.
Umieszczenie guzika wywołującego listę wszystkich "zakładek" oferty.
Umieszczenie guzika wywołującego szczegóły oferty.

Bardziej zaawansowane możliwości i pełną integrację z KSI CRM można wykonać oprogramowaując API, którego dokumentacja znajduje się pod adresem: REST API.
Niniejsza strona jest także działającym przykładem integracji "tej" strony ze stroną demo.dlaoperatora.pl.

1. Wymagania formalne

1.1 Wymagane Oprogramowanie

Podstawą intergacji Serwisu Internetowego z systemem KSI CRM dla organizatorów turystyki jest:

Zakupienie licecji na korzystanie z Oprogramowania KSI CRM. Więcej informacji na ten temat można przeczytać pod adresem: KSI CRM
Zakupienie licecji na korzystanie ze strony internetowej z formularzem umożliwiającym rezerwację. Więcej informacji na ten temat można przeczytać pod adresem: KSI Serwis WWW.

Szczegóły dotyczące cen za powyższe usługi można znaleźć pod adresem: cennik.

1.2 Identyfikatory ofert i terminów

Jeśli już posiadasz Oprogramowanie KSI CRM to do dalszego procesu integracji ze swoją stroną WWW potrzebna jest umiejętność znajdowania w systemie CRM: identyfikatorów ofert i idetyfikatorów terminów. Są one potrzebne do tego by podczas integracji było możliwe wskazanie odpowiedniej oferty lub odpowiedniego terminu/pakietu, na który chcemy przekierować użytkownika odwiedzającego Twoją stronę.

Identyfikator oferty - możemy go odnaleźć w zakładce "Informacje systemowe" oferty w systemie CRM, a także w adresie URL oferty ( pierwsza liczba za nazwą oferty ).

zobacz screen

W dalszej części zamiast identyfikatora oferty posługiwać się oznaczeniem [idOffer].
Identyfikator terminu / pakietu - możemy go odnaleźć w zakładce "Ceny / pakiety" w systemie CRM a także w adresie URL oferty.

zobacz screen

W dalszej części zamiast identyfikatora terminu będziemy posługiwać się oznaczeniem [idTrip].

Listy identyfikatorów w sposób zautomatyzowany można także poierać za pośrednictwem REST API.

2. Instrukcja integracji za pomocą deep-link`ów

Przykładowa strona udostępniająca formularze oraz listy rezerwacji: demo.dlaoperatora.pl.
W praktyce adres ten zostanie nadany po zakupie Oprogramowania, a sama nazwa domeny ustalana jest z Klientem.
Na potrzeby dokumentacji zmaiast nazwy domey używana jest zmienna [twoja-strona-ksi].

Na potrzeby wyświetlania kolejnych kroków rezerwacji w trybie bez nagłówka i stopki należy zmienić w panelu konfiguracji KSI CRM wartość parametru "tryb-wyswietlania" na "iframe":

zobacz jak zmienić parametr

2.1 Przycisk wywołujący formularz rezerwacji

Struktura URL dla formularza rezerwacji jest stała i opisuje ją następujący schemat:

https://[twoja-strona-ksi]/createReservation_[idTrip]_[idOffer].html

lub

https://[twoja-strona-ksi]/createReservation_[idTrip]_[idOffer]_moduleOnly.html

Niebieskimi kolorami oznaczone są zmiene, które trzeba odpowiednio uzupełnić tak, aby wskazywały na wybraną ofertę. Informację o tym skąd brać identfikary znajdziesz w punkcie 1.2.

Przykład 1 - z nagłówkiem

Zostanie wywołany formularz rezerwacji z nagłówkiem i stopką serwisu.

            
<a href="https://demo.dlaoperatora.pl/createReservation_5612_309.html" target=_blank class='button'> REZERWUJ </a>

Kliknij przycisk po prawej i zobacz jak działa ten przykład: REZERWUJ

Przykład 2 - iframe

Zostanie wywołany formularz rezerwacji bez nagłówka i stopki np. na potrzeby wywołania typu <iframe>.

            
<a href="https://demo.dlaoperatora.pl/createReservation_5612_309_moduleOnly.html" target=_blank class='button'> REZERWUJ </a>

Kliknij przycisk po prawej i zobacz jak działa ten przykład: REZERWUJ

2.2 Przycisk wywołujący listę terminów

Struktura URL dla wywołania listy terminów/pakietów do wyranej oferty:

https://[twoja-strona-ksi]/osw,,[idOffer]?pageTemplate=moduleOnly&offerTemplate=onlyTrips

Niebieskimi kolorami oznaczone są zmiene, które trzeba odpowiednio uzupełnić tak aby wskazywały na wybraną ofertę. Informację o tym skąd brać identfikary znajdziesz w punkcie 1.2.
Znając strukturę URL w kodzie HTML swojej strony można użyć na swojej stronie kodu analogicznego do przykładowych:

Wybór terminu na liście spowoduje automatyczne przeisienie do formularza rezerwacji.

Przykład

Zostanie wywołana lista terminów bez nagłówka i stopki serwisu np. na potrzeby wywołania typu <iframe>.

            
<a href="https://demo.dlaoperatora.pl/osw,,309?pageTemplate=moduleOnly&offerTemplate=onlyTrips" target=_blank class='button'> LISTA TERMINÓW </a>

Kliknij przycisk po prawej i zobacz jak działa ten przykład: LISTA TERMINÓW

2.3 Przycisk wywołujący wszstkie "zakładki" oferty

Struktura URL dla wywołania wszystkich "zakładek" wyranej oferty:

https://[twoja-strona-ksi]/osw,,[idOffer]?pageTemplate=moduleOnly&offerTemplate=onlyTabs

Przykład

Zostaną wywołane wszystkie zakłądki oferty bez nagłówka i stopki serwisu np. na potrzeby wywołania typu <iframe>.

            
<a href="https://demo.dlaoperatora.pl/osw,,309?pageTemplate=moduleOnly&offerTemplate=onlyTabs" target=_blank class='button'> ZAKŁADKI OFERTY </a>

Kliknij przycisk po prawej i zobacz jak działa ten przykład: ZAKŁADKI OFERTY

2.4 Przycisk wywołujący ofertę z wszystkimi szczegółami

Struktura URL dla wywołania szczegółów wyranej oferty:

https://[twoja-strona-ksi]/osw,,[idOffer]?pageTemplate=moduleOnly&offerTemplate=onlyOffer

Przykład

Zostanie wywołana lista terminów bez nagłówka i stopki serwisu np. na potrzeby wywołania typu <iframe>.

            
<a href="https://demo.dlaoperatora.pl/osw,,309?pageTemplate=moduleOnly&offerTemplate=onlyOffer" target=_blank class='button'> SZCZEGÓŁY OFERTY </a>

Kliknij przycisk po prawej i zobacz jak działa ten przykład: SZCZEGÓŁY OFERTY

3. Integracja za pomocą JavaScript / PopUp

Podstawą szybkiej integracji JavaScript z wyskakującym oknem PopUp jest dołączenie do swojej strony plików, które można pobrać klikając przycisk poniżej.
KSICRM.zip
Po pobraniu pliku w spakowaym archiwum KSICRM.zip znajdziesz dwa pliki, które należy wgrać i dodać do strony internetowej w taki sposób by można było w sekcjach <head> oraz <body> załączyć je do kodu strony w następujący sposób:

Na końcu sekcji <head>:

<link rel='stylesheet' type='text/css' href='ksi-crm.css'>
<script src='ksi-crm.js'></script>

Na końcu sekcji <body>:

<script>
  window.addEventListener('load', (event) => {
    ksi = new KSICRM ( "https://demo.dlaoperatora.pl/" );
  });
</script>

W paczce znajduje się także plik ksi-crm.css, w którym mozna zmodyfikować kolorystykę i wygląd okna PopUp ( kontenera ). Modyfikacja wyglądu formularza, listy terminów i prezentacji oferty możliwa jest jedynie w serwisach z indywidualnym projektem graficznym lub oprogramowując cały proces prezentacji oferty i rezerwacji z wykorzystaninem REST API.

Na potrzeby wyświetlania kolejnych kroków rezerwacji w trybie bez nagłówka i stopki należy zmienić w panelu konfiguracji KSI CRM wartość parametru "tryb-wyswietlania" na "iframe":

zobacz jak zmienić parametr

3.1 showReservationForm() - formularz rezerwacji w oknie PopUp

Wywołanie funkcji spowoduje wyświetlenie formuarza rezerwacji w wyskakującymn oknie ( popUp ).
Składnia wywołania funkcji:

ksi.showReservationForm( [idOffer], [idTrip], additionalTitle_opt );

Przykład

<span onclick="ksi.showReservationForm(309,5612);" class="button"> REZERWUJ </span>

Zobacz jak działa ten przykład: REZERWUJ

3.2 showOfferTrips() - lista terminów w oknie PopUp

Wywołanie funkcji spowoduje wyświetlenie listy terminów w wyskakującymn oknie ( popUp ).
Składnia wywołania funkcji:

ksi.showOfferTrips( [idOffer], additionalTitle_opt );

Przykład

<span onclick="ksi.showOfferTrips(309,'Wybierz termin');" class="button"> LISTA TERMINÓW </span>

Zobacz jak działa ten przykład: LISTA TERMINÓW

3.3 showOfferTabs() - lista "zakładek" oferty w oknie PopUp

Wywołanie funkcji spowoduje wyświetlenie "zakładek" oferty w wyskakującymn oknie ( popUp ).
Składnia wywołania funkcji:

ksi.showOfferTabs( [idOffer], additionalTitle_opt );

Przykład

<span onclick="ksi.showOfferTabs(309,'Wybierz termin');" class="button"> ZAKŁADKI OFERTY </span>

Zobacz jak działa ten przykład: ZAKŁADKI OFERTY

3.4 showOffer() - szczegóły oferty w oknie PopUp

Wywołanie funkcji spowoduje wyświetlenie szczegółów oferty w wyskakującymn oknie ( popUp ).
Składnia wywołania funkcji:

ksi.showOffer( [idOffer], [idTrip], additionalTitle_opt );
[idTrip] - jeśli nie chcemy wskazywać idTrip to wstawiamy pusty string ''.

Przykład 1

Wywołanie oferty w trybie domyślnym - w zajawce pokaże się najtańszy pakiet z oferty.

<span onclick="ksi.showOffer(309,'','Szczegóły oferty');" class="button"> OFERTA </span>

Zobacz jak działa ten przykład: OFERTA

Przykład 2

Wywołanie oferty ze wskazaniem na wybrany termin/pakiet:

<span onclick="ksi.showOffer(309,5612,'Szczegóły oferty');" class="button"> OFERTA </span>

Zobacz jak działa ten przykład: OFERTA