Empathy integration

8. Click on    Add a new field to create each of the custom fields and complete its information:

• Create a field named "PriceFrom" with ID "priceFrom" of type Decimal to capture the minimum price delimiter.
• Create a field named "PriceUpTo" with ID "priceUpTo" of type Decimal to capture the maximum price delimiter.

9. Click on   Save.

STEP 3: Creating the workflow to trigger the event during the contact's navigation

(In this section, we will create the workflow that captures the contact's activity during their navigation in Empathy's search within the eCommerce. This activity will be captured through a script that will be inserted in the eCommerce via an inline).

10. Go to Workflows and create a new blank workflow.

11. In the "Start" node configuration, in the area Select a limitation choose All my list and in Select a data source check All existing and new.

12. Add the trigger node "On page visit" so that the workflow is activated when a contact visits the website.

13. Go to its configuration and, in the Limitations tab, remove all limitations.

14. Add the node "Send web content" to insert the Script that will check the contact's activity in Empathy.

15. Go to its configuration and create a new content of type Inline.

16. Inside the content editor, add an HTML component.

17. Edit it, copying and pasting the following code:

<script>
  (function () {
  var searchEventAlias = "empathy-search";
  var tempQuery = null;
  var tempPriceFrom = null;
  var tempPriceUpTo = null;

  function sendConnectifEventsWhenReady(events) {
    if (
      window.connectif &&
      window.connectif.managed &&
      window.connectif.managed.isInitialized()
    ) {
      window.connectif.managed.sendEvents(events);
    } else {
      document.addEventListener(
        "connectif.managed.initialized",
        function onConnectifInitialized() {
          window.connectif.managed.sendEvents(events);
        },
        { once: true }
      );
    }
  }

  function debounce(func, timeout) {
    var timer;
    return function (data) {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(function () {
        func(data);
      }, timeout);
    };
  }

  function isInterfaceXDefined() {
    return !!window.InterfaceX;
  }

  function whenInterfaceXReady() {
    if (isInterfaceXDefined()) {
      return Promise.resolve();
    }
    var numberOfChecks = 50;
    var count = 0;
    return new Promise((resolve, reject) => {
      function check() {
        setTimeout(function () {
          if (isInterfaceXDefined()) {
            resolve();
          } else {
            count++;
            if (count === numberOfChecks) {
              reject(new Error("InterfaceX cannot found after timeout"));
            } else {
              check();
            }
          }
        }, 100);
      }
      check();
    });
  }

  whenInterfaceXReady()
    .then(function onInterfaceXDefined() {
      window.InterfaceX.bus.on("SearchResponseChanged", true).subscribe(
        debounce(function onSearch(payload) {
          var data = payload.eventPayload.request;
          // ignore page navigation
          if (data.page > 1) {
            return;
          }

          var priceFrom =
            (data &&
              data.filters &&
              data.filters.facetPrice &&
              data.filters.facetPrice[0] &&
              data.filters.facetPrice[0].range &&
              data.filters.facetPrice[0].range.min) ||
            null;

          var priceUpTo =
            (data &&
              data.filters &&
              data.filters.facetPrice &&
              data.filters.facetPrice[0] &&
              data.filters.facetPrice[0].range &&
              data.filters.facetPrice[0].range.max) ||
            null;

          var query = data.query;
          var queryHasChanged = query !== tempQuery;
          var priceRangeHasChanged =
            priceFrom !== tempPriceFrom || priceUpTo !== tempPriceUpTo;
          if (!queryHasChanged && !priceRangeHasChanged) {
            return;
          }

          tempQuery = query;
          tempPriceFrom = priceFrom;
          tempPriceUpTo = priceUpTo;

          function trackSearch() {
            var events = [];
            if (queryHasChanged) {
              events.push({
                type: "search",
                searchText: query,
              });
            }
            if (priceRangeHasChanged) {
              events.push({
                type: "custom",
                eventAlias: searchEventAlias,
                payload: {
                  priceFrom: priceFrom || 0,
                  priceUpTo: priceUpTo || 0,
                },
              });
            }
            sendConnectifEventsWhenReady(events);
          }
          trackSearch();
        }, 1000)
      );
    })
    .catch(console.error);
})();
</script>  

18. Save the content and continue to finalize the node configuration.

19. Select the Inline content you just created and click on Next .

20. On the next screen, add the appropriate selector to display the content. This must be an element on your page. In our example, we have placed the selector in the footer of the page, so the content, meaning the script, will always be activated.

21. In the Limitations tab, remove all limitations of the node and save its configuration.

22. Save and activate the Workflow.

STEP 4: Storing information in the Connectif contact sheet

4.1. Creating custom fields in Connectif

(In this section, we will create the custom fields that will collect the information sent from Empathy, such as the brand and the minimum and maximum price filters used by the contact during their navigation).

23. Go to "Contacts > Contact Fields" and click on    Add new custom field.

24. Assign it the type Decimal and click on Go to editor.

27. Assign it the Name "priceFrom" and the ID "priceFrom" and click on   Save. This value will capture the minimum price indicated by the contact.

28. Create a second field, also of type Decimal.

29. Assign it the Name "priceUpTo" and the ID "priceUpTo" and click on   Save. This value will capture the maximum price indicated by the contact.

4.2. Creating the workflow to update the fields

(In this section, we explain how to store the data sent from Empathy in the contact sheet in Connectif through a workflow).

30. Go to the left-side menu and select Workflows and create a new Custom Workflow.

31. In the "Start" node configuration, in the Select a limitation area, choose All my list and in Select a data source check All existing and new.

32. Connect the "Start" node with the Trigger node you created to receive the brand and price data from Empathy.

33. Connect the Trigger node to the "Set Field" node.

34. Access its configuration and, within the interface, drag the fields you just created, with the data source Contact, from the left column to the central block so that they match with the corresponding fields in the right column.

35. Save the node configuration. 

36. Save and activate your workflow.

Keep learning!

To take full advantage of your Connectif account, we recommend continuing with the following articles:

• Recommender on home, to learn how to create a recommendation banner on the home page, which you can customize with Empathy's data.

• Custom integration to receive data, to learn how to use information that is not registered by default in the platform.

• Integrations with external systems, to integrate your Connectif account with Facebook, forms, and other webhooks from your website.

• API integrations, to manage events such as purchase registrations or contact sign-ups.