The following describes the integration of pCon.ui into websites, which is also called the lead scenario.

If you're looking for the integration in shops, please head to: Integration for Shop Systems (OCI Punchout)

In the initial setup, you chose to show or hide the "Send request"-button.

In the iframe, pCon.ui collects the data for the contact-request postMessage with the click on the “Send Request” button. A HTML postMessage will be send to the parent site (your website). This postMessage includes a JSON object with the article information. The parent website now evaluates the message, opens the contact form and pre-fills some of the form fields.

Right after a click on the “Send Request”-button, there is a pre-inform postMessage. The JSON object in the pre-inform postMessage reads:

{
    "action": "contact-request-pre-inform",
    "data": null
}

After the processing of article data collecting is completed, the contact-request postMessage is send to the iframe parent. It contains a JSON object, whose “data”-field reads for a single article:

{
  "obxUrl": "<url_to_obx>",
  "reopenUrl": "<url_to_ui_with_obx>",
  "pdfUrl": "",
  "articles": [
    {
      "itemId": "<article_itemId>",
      "manufacturerId": "<string>",
      "seriesId": "<string>",
      "baseArticleNumber": "<string>",
      "variantCode": "<string>",
      "shortText": "<string>",
      "longText": "<string>",
      "featureText": "<string>",
      "articleImage": "<url_to_article_image>",
    }
  ]
}

obxUrl and therefore the reopenUrl is hosted on our servers and valid for 24 hours. In case you want to prolong it, you have to host the files on your own server. Check OBX Hosting for more information.

pdfUrl is empty by default as we want to minimize usage of our server storage space. If needed, please check how to enable the generation of a product sheet for the request button.

If activated (see above) the pdfUrl is hosted on our servers and valid for 24 hours. Feel free to download and save it to your needs within this time.

The data of the postMessage can also contain several products since the configuration allows adding of so-called child products. For example, a worktop can have a CPU holder. In that case, the JSON is structured in the following way:

{
    "obxUrl": "<url_to_obx>",
    "reopenUrl": "<url_to_ui_with_obx>",
    "pdfUrl": "",
    "articles": [
        {
            "itemId": "<main_article_itemId>",
            "manufacturerId": "<string>",
            "seriesId": "<string>",
            "baseArticleNumber": "<string>",
            "variantCode": "<string>",
            "shortText": "<string>",
            "longText": "<string>",
            "featureText": "<string>",
            "articleImage": "<url_to_article_image_with_child>",
        },
        {
            "itemId": "<child_itemId>",
            "manufacturerId": "<string>",
            "seriesId": "<string>",
            "baseArticleNumber": "<string>",
            "variantCode": "<string>",
            "shortText": "<string>",
            "longText": "<string>",
            "featureText": "<string>"
        }
    ]
}

In case of a PEC, there can be several main articles. In this case, there is one OBX containing all articles, but no reopen-URL. Instead, every main article has an additional OBX and reopen-URL containing only this main article and its child articles:

{
    "obxUrl": "<url_to_obx_all_articles >",
    "reopenUrl": "",
    "pdfUrl": "",
    "articles": [
        {
            "itemId": "<main_article1_itemId>",
            … (see above)
            "articleImage": "<url_to_article1_image_with_child>",
            "obxUrl": "<url_to_obx1_with_article1_and_child>",
            "reopenUrl": "<url_to_ui_with_obx1>",
        },
        {
            "itemId": "<child_itemId>",
            … (see above)
        },
        {
            "itemId": "<main_article1_itemId>",
            … (see above)
            "articleImage": "<url_to_article2_image >",
            "obxUrl": "<url_to_obx2>",
            "reopenUrl": "<url_to_ui_with_obx2>",
        }
    ]
}