To facilitate the promotion of your shop offerings, we offer you the possibility to integrate a pre-configured, interactive teaser (product slider) of your items directly into your website. You can create this for each language in which your shop is available and optionally restrict it to specific products or categories.

Free module. We offer you the interactive teaser free of charge to promote your shop offering. The slider is ready to use and does not require activation.

Integration

The integration is done via an iFrame, which is inserted into the website using JavaScript. A container must be added to the integration page at the desired location, where the incert widget will be displayed. The content is rendered by inserting the shop reference. The placeholder "Customer Code" can be requested from service@incert.at.

Embedding Code

<link rel="preconnect" href="https://incert-resources.com"> 
<link rel="preconnect" href="https://CustomerURL.myincert.com"> 
<script 
  type="module" 
  src="https://incert-resources.com/frontend/Customer-Code/widget-app/main.js"  
  onload='inctMount("#widget","InctProductTeaserList",{})'>
</script>  
<div id="widget" class="inct-widget"></div>

Technical Details

The Incert frontend bootstrap is included as an asynchronous script. Once the resource is loaded, the Incert frontend is initialized using the method "initIncertFrontend," which receives the Incert system URL and the desired app as parameters. Subsequently, any components of the Incert frontend can be rendered using the method "mountIncertFrontendComponent." The parameters for this are the ID of the container element, the component name, and optionally, a component-specific configuration.

Configuration

Languages

Not every system is prepared for multiple languages. If uncertain, you can contact service@incert.at. To call a language, the integration is extended by loading the necessary resources – for this, we extend the function call:

<link rel="preconnect" href="https://incert-resources.com">
<link rel="preconnect" href="https://CustomerURL.myincert.com">
<script 
  type="module" 
  src="https://incert-resources.com/frontend/Customer-Code/widget-app/main.js"
  onload="init()">
</script>
<script>
  function init() {
    fetch("https://CustomerURL.myincert.com/api/environment?language=en", {
      credentials: 'include'
    }).then(
      () => inctMount(
        "#widget",
        "InctProductTeaserList", 
        {}      
      )    
    );  
  }
</script>
<div id="widget" class="inct-widget"></div>

Restriction to Selected Categories

{content: {ptlContentCategory: {ptlContentCategoryValues:[ID, ID]}}}

The content of the widget can be flexibly adjusted by adding category IDs. The category ID can be retrieved from the category/voucher setup.

Consideration of Subcategories (Recursion):

{content: {inclSubCats: true}}

The content of the widget can be expanded to include items located in the subcategories of the specified category. 

Restriction to Selected Products

{content: {ptlContentProduct: {ptlContentProductValues:[ID, ID]}}}

The content of the widget can be flexibly adjusted by adding product IDs. The product ID can be retrieved from the category/voucher setup.

Restriction to Selected Product Types

{content: {ptlContentProductType: {ptlContentProductTypeValues:[1,2,6,10,23]}}}

The content of the widget can be flexibly configured by adding category IDs. The IDs in the example represent vouchers, value cards, and products:

Package Voucher (1), Value Voucher (2), Value Card (6), Physical Product (10), Ticket (18), Product Bundle (23).

Example of using the mentioned product types within selected categories:

<link rel="preconnect" href="https://incert-resources.com">
<link rel="preconnect" href="https://CustomerURL.myincert.com">
<script 
  type="module" 
  src="https://incert-resources.com/frontend/Customer-Code/widget-app/main.js"
  onload="init()">
</script>
<script>
  function init() {
  fetch("https://CustomerURL.myincert.com/api/environment?language=de", {
  credentials: 'include'
  }).then(
    () => inctMount(
      "#widget",
      "InctProductTeaserList", 
      {
        content:{
          ptlContentCategory: {ptlContentCategoryValues:[1] },
          ptlContentProductType: {ptlContentProductTypeValues:[1,2,6,10,23]}
        }
      }
    )
  );
}
</script>
<div id="widget" class="inct-widget"></div>

Restriction to Sub-Shops

Some systems have so-called sub-shops (separately integrated sections – e.g., for tickets separately from vouchers). You can configure the slider so that only the content of a sub-shop is displayed.

{content: {subShopId: ID}}

Multiple Embeddings on a Single Page

It is also possible to embed the widget multiple times in different configurations on a single page. It is important to correctly reference the IDs for this purpose. The positioning of the sliders can thus be flexibly adjusted across the entire page by placing the "div" elements in the desired locations.

Example of multiple integrations of the teaser.

<link rel="preconnect" href="https://incert-resources.com">
<link rel="preconnect" href="https://CustomerURL.myincert.com">
<script type="module" async onload='init()' src="https://incert-resources.com/frontend/Customer-Code/widget-app/main.js"></script>
<script>
function init() {
  inctMount(
   "#widget-1",
    "InctProductTeaserList",
    {}
  );
  inctMount(
   "#widget-2",
    "InctProductTeaserList",
    {content: {
      ptlContentCategory: {ptlContentCategoryValues:[3, 9, 7]}
    }});
}
</script>
<div id="widget-1" class="inct-widget"></div>
<div id="widget-2" class="inct-widget"></div>

Used Images

The individual product elements are displayed in a predefined standard format. If the existing product images do not match the required aspect ratio, a cropped section of the product image will be used. If no "Product Image 2" is stored for the voucher/ticket, "Product Image 1" will be used instead.

If the images appear pixelated, please contact service@incert.at and request the "activation of image usage purposes."