Directly from your Aiden app to the shopping cart? This can be done using the Add to cart call to action. Instead of the standard call to action (CTA) that links to the product detail page, you can display a CTA to give the customer the option to add the product to their shopping cart.
Note: you need a developer with knowledge of JavaScript to implement this functionality.
We recommend creating a copy of one of your apps to test with. Once the integration is up and running, you can activate it on all your live apps.
Follow these steps to setup the Add to cart CTA.
Step 1: Activate the CTA in Aiden
Go to your Aiden app and then to Conversation > Advice page > Product content. Change the type from “Product link” to “Add to cart”. Change the text of the Add to cart button.
Step 2: Implement the action on your website
To make the CTA work, Aiden sends an event to the website as soon as the button is clicked. This event must be captured on the website, and then an action must be linked to it to make the button functional.
Then, feedback must be sent back to the Aiden application (see step 2.2) to inform the customer whether the action was successful.
Note: if no response is received by the Aiden app within 10 seconds, it will assume that the action was not executed and will show the appropriate feedback to the customer. If you need more time, for example, because additional action is required from the customer, you can "acknowledge" the event to suspend the timeout.
2.1 Performing Actions
The Add to cart action that is triggered can be captured with an event listener. This must listen to an event target named aiden-actions. You can then identify the type of action by the event.detail.actionId, which is aiden-add-to-cart.
To receive the events, you need to add an event listener to the window that listens to "aiden-actions".
window.addEventListener("aiden-actions", function (event) {
// Check which action was performed, in this case "aiden-add-to-cart".
if (event.detail.actionId === "aiden-add-to-cart") {
// Acknowledge the Aiden app that you received the event,
// you have an implementation for this specific action,
// and you will handle it.
event.detail.acknowledgeCallback();
// Perform the Add to cart action
// In most cases this means calling an endpoint or triggering some functionality like a modal.
//
// <Add your implementation here>
//
// If the operation succeeds signal the Aiden app with a success:
// event.detail.successCallback();
// If the operation failed signal the Aiden app the operation failed:
// event.detail.failedCallback();
// If the operation is aborted, either by your decision or a customer decided to abort the action. This is useful in cases where a customer has to make additional choices before adding the product to their cart but closes the popup modal or another way to cancel the action.
// event.detail.abortCallback();
}}); The event contains a detail field with specific data for the event. This is the structure and data of the detail field.
type detail = {
type: "custom-action"
advisorId: string
advisorName: string
actionId: string
products: {
id: string
quantity: number
name: string
}[]
}
Name | Contains |
detail.advisorId | Unique value to identify the Aiden app |
detail.advisorName | The name of the app you have set in Aiden |
detail.actionId | The identifier of the action, for Add to cart this is |
detail.products | A list of products |
detail.products[].id | The product ID as it appears in the catalog in Aiden |
detail.products[].name | The name of the product |
detail.products[].quantity | The quantity of the product. This is always a number of 1 or higher. |
2.2 Feedback to the Aiden app
When the website action is executed, a response must be sent back to the Aiden app. There are four possible responses:
event.detail.acknowledgeCallback()Invoke this when you have received the event and have an implementation for it. The application will continue to wait for further responses. If this is not done, the action will be aborted after 10 seconds, and feedback will be given to the customer that the action was not successful.
event.detail.successCallback()Use this feedback if the action on the website was completed successfully, for example, when the product has been added to the shopping cart.
event.detail.failedCallback()Use this feedback if the action on the website failed, for example, when adding the product to the shopping cart was unsuccessful.
event.detail.abortCallback()Use this feedback if you want to abort the action. The Aiden application will immediately revert to the status before the action was executed. This callback is for situations where you cannot handle the action for some reason, or the customer aborts the action. For example, when closing a choice modal to select a variant of the product before adding it to the shopping cart.
2.3 Temporarily hide the Aiden app
If, after clicking the CTA, you want to display a form or a pop-up, you can temporarily hide the Aiden app or ensure that the new content appears above the Aiden app. This prevents a pop-up-over-pop-up situation, contributing to a clear customer experience.
The following functions are available for this:
event.detail.hideApp()Use this function to temporarily hide the Aiden app.
event.detail.showApp()Use this function to make the Aiden app visible again.
event.detail.setZIndex(100)Use this function to set the z-index of the Aiden app. Provide the desired z-index as the first argument. This ensures that the Aiden app is placed beneath modals needed to perform the action.
Step 3: Publish your Aiden app
Don't forget to republish your Aiden app; only then will the CTA be visible and functional on the advice page. If the Aiden app is already live, make a copy of the Aiden app to test the CTA first so that it works immediately when the Aiden app is republished.