WEB WIDGET FOR TICKET SALES

GENERAL INFORMATION
CREATING A LINK
DESIGN CUSTOMIZATION
CHANGES IN 2.0 BUILD
SELLING MERCHANDISE (GOODS)

GENERAL INFORMATION

WEB WIDGET of BIL24 platform is used to sell tickets on the Internet. WIDGET can be embed into any website. If own website is absent, you can receive link to BIL24 container website, and sell tickets anywhere via this link, for example, in social networks. In any case, every ticket sale is owned by a specific BIL24 Agent, who’s frontend data (FID and token) are transferred through link. So, for these sales Agent receives rewards.

Examples of websites using WEB WIDGET: sochitop10.ru, museum-tickets.ru, kubantop10.ru.

WEB WIDGET can be used for selling merchandise and other goods. There is a special Mode for this. You can look up here how it works.

To install WEB WIDGET on owned website it’s required to download ARCHIVE and unpack it in website’s root directory. Folder “bilorder” will appear in this directory, where WEB WIDGET code is contained.

If you are to use BILW.ru container website then you don’t have to download WIDGET archive.

CREATING A LINK

To create a link to WEB WIDGET you have to enter Manager App with Agent’s or Operator’s rights and open Widget tab (figure 1).

1. Agent selection.

2. Selection of a frontend for widget creation. Widget link transfers frontend’s FID and token.

3. Widget allows selling tickets to a specific event or to all events in specific venue or city. It’s required to choose one of three types:

- for all events available in the city

- for all events available in the venue.

- only for selected event.

4. Language selection.

5. City selection.

6. Selection of event from the list of ones available for this frontend in this city.

7. It’s required to put address of an HTML page where customer will be redirected after successful payment of an order in “URL of successful payment page” field. Successful payment page on bilw.ru is used by default.

8. It’s required to put address of an HTML page where customer will be redirected after unsuccessful payment of an order in “URL of agreement page” field. Agreement page on bilw.ru is used by default.

9. Чаще всего ссылка на виджет устанавливается на кнопку "Купить билет". В этом поле можно указать HTML-код этой кнопки, тогда он будет добавлен в код ссылки автоматически.

9. Most of the times widget link is set on “Buy ticket” button. In this field you can set HTML code of this button, so it’ll be added to link code automatically.

10. Text field, where generated link to site-container bilw.ru is located. There is the latest version of widget, which can be used by any Agent without restrictions.

11. Text field containing generated link to widget, which is placed on Agent’s website.

12.Script for displaying widget above page in separate frame. Script has to be placed in page header. An example of using such script: website sochitop10.ru.

13. Button for copying HTML code from text fields to clipboard.

14. Link to WEB WIDGETarchive.

15. Users with Operator role can upload ticket templates here.

16. User agreement URL. While purchasing tickets you have to accept user agreement, link to which is received from this field and is put in widget’s bucket. While creating web widget link in performance mode there is automatically included link to user agreement depending on internet acquiring used.

DESIGN CUSTOMIZATION

To change design in WEB WIDGET (to customize) there is bilorder/styles/suctom-style.css file. This file is applied after default styles and contains examples of changing background color, event tab, fonts or calendar.


1. Background color (#FFFFFF by default) is changed in custom-style.css.



2. Poster image is received from ticketing system protocol and is changed in Editor App.

3. Event panel, its height is adjusted to volume of data. Panel background is a top down gradient (color transition). Gradient is changes in custom-style.css.



4. Background image for setting ticket’s minimum price. File images/circle.png sized 66x66 pixels.

5. Font is changed in custom-style.css.



6. Calendar style is changed in custom-style.css.



CHANGES IN 2.0 BUILD

New build of WEB WIDGET 2.0 (figure 2) has following changes:



figure 2

1. Added working with promo codes. Field for entering promo codes is available for users who confirmed their e-mail. Promotions via promo codes are created and managed in Manager App.

2. Added user menu with access to user’s tickets, mecs (mobile electronic cards), orders and promo codes. After e-mail confirmation user gains access to this data (figure 3).


figure 3

3. Mobile Electronic Cards (MEC) are now available for WEB WIDGET and all Browser-type frontends.

4. “Venue” mode is added to “City” mode. WEB WIDGET platform displays performances with sessions in selected venue in “Venue” mode.

5. Ticket types are signed (either assigned seats or not) on combined seating plans and during ticket sales.

6. Date and time of session are displayed in single string. During session selection there is automatic scroll to loading seating plan.

7. Added icon for authorization through e-mail confirmation.

8. On mobile devices icons for menu, authorization and cart are displayed in separate panel over main page.

9. WITH WEB WIDGET 2.0 it’s required to use new script for displaying something over page in separate frame:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" /><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="/bilorder/scripts/modernizr-custom.js"></script><script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script><script> $(document).ready(function(){ $(document).on('click', '.bilorder-trigger', function(e){ if( Modernizr.mq('(min-width: 1280px)') ){ e.preventDefault(); $.fancybox.open({ src: $(this).attr('href'), type: 'iframe', opts: { iframe : { css : { width : '80vw', height : '80vh' } } } }); } }); });</script>

SELLING MERCHANDISE (GOODS)

To switch WEB WIDGET into selling goods mode you have to put in link goods=true parameter. In this mode “ticket” terminology is replaced with “goods” one. This mode is useful if you have to sell merchandise or related products besides tickets to an event. You can look up how it works on this page.