Following the same concept as the Newsletter Widget, the Product Widget is nothing but a simple code snippet which you can easily integrate into any website. With our flexible and responsive Product Widget, you can easily build a product catalog page with your own style on your own website. The latest product information presented inside the widget will be automatically fetched from the catalog of the corresponding SecuTix online sales platform. No more manual copy paste and maintenance of the product information are needed!
Please note that this article only applies to SecuTix Gravity Product Widget V1 which is released within PizBernina V2. |
To use a product widget, first you would need to integrate a code snippet into your target website. You may either contact your web agency to embed the snippet into your website's HTML code or integrate it via Google Tag Manager. The code snippet will first call SecuTix back-end service to fetch the necessary configurations (e.g. theme and labels) and product information (e.g. name, image, date, supported action buttons, etc.) from the catalog of the corresponding online sales platform. Then it will render the user interface of the widget and present the product information based on the configuration. Like the newsletter widget, the default style and theme of the product widget are the same as the ones from the corresponding online sales platform. You may also override the styles via custom CSS.
Below is an example of a custom product catalog page built using multiple product widgets with various initialization parameters.
<div id="stx-product" class="product"></div> <script type="text/javascript" src="https://s3.eu-central-1.amazonaws.com/pub.tnwi.p16-s3.secutix.com/stx-widgets/Product/v1/Product.js"></script> <script type="text/javascript"> STX.config({apiKey:"8bafa660-8bc1-4982-83da-f15fce01f4ec", hostname:"hostname of your online sales platform"}); STX.widgets.Product.render({ props: { productId:'your product ID', occurrenceId: 'your performance or timeslot ID', aspectRatio:'VERTICAL', showActions: false, showText: true, showImage: true }, locale:"en", root:"#stx-product"}); </script> |
apiKey - the secret token generated in your point of sales configuration screen. You may find this parameter in the Sales Channels > Point of sales > Characteristics > Internet Parameters tab.
hostname - the hostname of the point of sales URL for your online sales platform.
Please note that the product widget will fetch the configurations (e.g. theme and label overriding) from the corresponding point of sales. |
productId - the Id of the product that you want to display inside the widget.
Please note that the product widget will fetch the product information (e.g. name, image, date, supported action buttons, etc.) from the corresponding point of sales. |