Integrate Connectif with Motive to use the search data generated by each contact in Connectif workflows.
In this article, you will learn how to integrate Motive with Connectif and how to store the brand and/or price filter information (minimum and maximum) in custom contact fields
Implementation time: 1 hour.
Difficulty: Intermediate
When to use it?: To store information collected by Motive and use it in your strategies.
Why implement the extension
1. Use cases you can create after this integration
Here are some ideas that may help you implement different strategies in the Motive app after activating the Motive extension in your Connectif Store.
- Include a recommender on the homepage based on the brand and price ranges that the contact indicated in Motive.
- Send an email with products adapted to their searches to contacts who have performed a search in Motive including brand and prices and have not done anything else.
2. What data can you bring from Motive to Connectif?
With this extension, Connectif will receive from Motive the information of:
- The search term a contact uses in Motive.
- The brand and, if used, the minimum and maximum price limitation, filtered by the contact in their search.
STEP 1: Creating the custom integration in Connectif
1. Go to Store Settings in the left sidebar menu.
2. In the tab selector, go to "Integrations > Custom Integrations (webhooks)" and click on Create new integration.
3. Set the field "Integration Name" to identify the integration.
4. (Optional) Customize the color, include a description, or categorize the integration.
5. Click on Save.
STEP 2: Creating the reception event
2.1. Creating the reception event for the search, price, and brand
(This section explains how to create and configure the event that will be received from Motive).
6. In the Receive data tab, click on Create new reception event and select the Web/Mobile App type.
7. Assign it a name and the alias "motive-search".
You must assign this alias to match the Connectif Script.
8. Click on Add new field to create each of the custom fields and complete their information:
- Create a field named "Brand" and ID "brand" of type Text to collect the brand.
- Create a field named "PriceFrom" and ID "priceFrom" of type Decimal to collect the minimum price delimiter.
- Create a field named "PriceUpTo" and ID "priceUpTo" of type Decimal to collect the maximum price delimiter.
9. Click on Save.
STEP 3: Creating the workflow to activate the event during the contact's navigation
(In this section, the workflow will be created that will collect the contact’s activity during their navigation through the Motive search engine inside the eCommerce. This activity will be collected 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 configuration of the "Start" node, in the area Select a limitation choose My entire list and, in Select a data source select All existing and new ones.
12. Add the trigger node "On page visit" so the workflow will be triggered when a contact visits the website.
13. Access 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 Motive.
15. Access its configuration and create a new content of type Inline.
16. Inside the content editor, add a component of type HTML.
17. Edit it, copying and pasting the following code:
<script>
(function () {
var searchEventAlias = "motive-search";
var tempQuery = null;
var tempPriceFrom = null;
var tempPriceUpTo = null;
var tempFirstBrand = 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.price &&
data.filters.price[0] &&
data.filters.price[0].range &&
data.filters.price[0].range.min) ||
null;
var priceUpTo =
(data &&
data.filters &&
data.filters.price &&
data.filters.price[0] &&
data.filters.price[0].range &&
data.filters.price[0].range.max) ||
null;
var firstBrand =
(data &&
data.filters &&
data.filters.brand &&
data.filters.brand[0] &&
data.filters.brand[0].label) ||
null;
var query = data.query;
var queryHasChanged = query !== tempQuery;
var brandHasChanged = firstBrand !== tempFirstBrand;
var priceRangeHasChanged =
priceFrom !== tempPriceFrom || priceUpTo !== tempPriceUpTo;
if (!queryHasChanged && !priceRangeHasChanged && !brandHasChanged) {
return;
}
tempQuery = query;
tempPriceFrom = priceFrom;
tempPriceUpTo = priceUpTo;
tempFirstBrand = firstBrand;
function trackSearch() {
var events = [];
if (queryHasChanged) {
events.push({
type: "search",
searchText: query,
});
}
if (priceRangeHasChanged || brandHasChanged) {
events.push({
type: "custom",
eventAlias: searchEventAlias,
payload: {
priceFrom: priceFrom || 0,
priceUpTo: priceUpTo || 0,
brand: firstBrand
},
});
}
sendConnectifEventsWhenReady(events);
}
trackSearch();
}, 1000)
);
})
.catch(console.error);
})();
</script>
18. Save the content and continue to complete the node configuration.
19. Select the Inline content you just created and click Next .
20. On the next screen, add the appropriate selector to display the content. This should be an element found on your page. In our example, we placed the selector in the footer of the page, so the content (the script) will always be activated.
21. In the Limitations tab, remove all limitations from the node and save its configuration.
22. Save and activate the Workflow.
This way, every time a contact visits a page on the eCommerce, this content will wait for an event from Motive to be triggered to collect the contact's browsing data.
STEP 4: Storing the 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 Motive, 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 the type Text and click on Go to editor.
25. Assign the Name "Brand" and the ID "brand" and click on Save. This value will collect the brand of the searched product.
26. Create a second field, this time of type Decimal.
27. Assign the Name "priceFrom" and the ID "priceFrom" and click on Save. This value will collect the minimum price indicated by the contact.
28. Create a third field, also of type Decimal.
29. Assign the Name "priceUpTo" and the ID "priceUpTo" and click on Save. This value will collect 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 by Motive in the contact sheet in Connectif through a workflow).
30. Go to the left sidebar menu and select Workflows and create a new Custom Workflow.
31. In the configuration of the "Start" node, in the area Select a limitation choose My entire list and, in Select a data source select All existing and new ones.
32. Connect the "Start" node to the trigger node you created to receive the brand and price from Motive.
33. Connect the trigger node to the "Set field" node.
34. Access its configuration and, within its interface, drag the fields you just created, with the data source Contact, from the left column to the central block, so they match the corresponding fields from the right column.
35. Save the node configuration.
36. Save and activate your workflow.
Success!
Your Connectif account integration with Motive is ready.
Keep learning!
To take full advantage of your Connectif account, we recommend continuing with the following articles:
Homepage recommender, to learn how to create a recommender banner on the homepage, which you can customize with Motive data.
Custom integration to receive data, to learn how to use information not registered by default in the platform.
Integrations with external systems, to integrate your Connectif account with Facebook, forms, and other webhooks from your site.
API integrations, to manage events such as purchase registrations or contact sign-ups.