Integrating with Yotpo

You can quickly and easily integrate Elastic Path Commerce Cloud with Yotpo using the Integrations Hub in Commerce Manager. Integration with Yotpo enables your customers to provide ratings and reviews in the storefront for the products they purchased. You can also sync the customer feedback with any search provider that you use; this displays the average customer ratings and reviews received for a product in the storefront.

This is how the integration of Elastic Path Commerce Cloud with Yotpo works:

1. The following Elastic Path Commerce Cloud information is shared with Yotpo:

   • Products:

     • Products with child products
     • Products with no child products
     • Child products

   • Orders: Both order.created and order.fulfilled information is synched with Yotpo.

   • Customers

2. Avarage ratings and total number of reviews received for a product in Yotpo are shared with Elastic Path Commerce Cloud, and stored with the relevant product as template data.

You must complete the following before configuring the integration with Yotpo.

You can get the following API credentials in Commerce Manager from SYSTEM > Application Keys. You must log in as a user with seller admin privileges:

• Token URL: The API token URL:

  • EU: https://api.moltin.com/oauth/access_token
  • US: https://useast.api.elasticpath.com/oauth/access_token

• Client ID: Your Elastic Path Commerce Cloud Client ID.
• Client Secret: Your Elastic Path Commerce Cloud Client Secret.

You must get the following details from Yotpo:

• Token URL: The API token URL of your Yotpo account. By default, the value is https://api.yotpo.com/oauth/token.
• Client ID: Your Yotpo Client ID. In Yotpo, it might be mentioned as Store ID or App ID.
• Client Secret: Your Yotpo Client Secret.

Once you have completed the Prerequistes, you are ready to configure the Yotpo integration:

1. In Commerce Manager, under COMPOSER, click Integrations Hub.

2. Under Product Information, click Yotpo.

3. Click Configure.

   A window appears where you must configure the integration details.

4. In Initial Configuration, click Next.

5. In Connections, enter the following:

   i. In the Elastic Path Commerce Cloud Connection section, enter the following values:

   - Client ID
   - Client Secret
   - Token URL

   For more information, see Commerce Cloud connection details.

   ii. Click Connect. The authorization is successfully completed. iii. In Yotpo Connection, enter the following values:

   - Client ID
   - Client Secret
   - Client Token URL

   For more information, see Yotpo connection details.

   iv. Click Connect. The authorization is successfully completed.

6. Click Next.

7. In Configurations, configure the following:

• Enable Catalog Selection Criteria: Select this checkbox to either include or exclude catalogs from being published to Yotpo. You can specify multiple catalogs that you want to include or exclude from sharing with Yotpo.

  i. Select the Enable Catalog Selection Criteria checkbox.
  ii. In the Selection Rule box, select include or exclude.
  iii. Click Add Multiple Catalogs to Yotpo to add the catalogs that you want to include or exclude from publication. You can add multiple catalogs to include or exclude from publication.

• Enable Product Webhook: Select this checkbox to create webhook events for any product in Elastic Path Commerce Cloud. The product information is shared with Yotpo as part of this integration. By default, the checkbox is selected and catalog-release.updated event is created.
• Enable Order Webhook: Select this checkbox to create webhook events for orders in Elastic Path Commerce Cloud. The order details are shared with Yotpo as part of this integration. In the Events list, select the specific order event for which you want to create the webhook. For more information on order events, see Observable Events. By default, the checkbox is selected and the default event is order.paid.

• Enable Customer Webhook: Select this checkbox if you want to create webhook events for customer information in Elastic Path Commerce Cloud. The customer details are shared with Yotpo as part of this integration. Click Add Customer Events to add the events for which you want to create webhooks in Elastic Path Commerce Cloud; by default, customer.selected and customer.updated are added. You can remove these default events too and add specific customer events as per your requirements. For example, select customer.deleted if you want to disable customer status in Yotpo when a customer account is deleted in Elastic Path Commerce Cloud.

• Product Rating Extension: The number of reviews and average ratings received for a product is saved in Commerce Manager. You must define a template to save the customer feedback. The templates follow a JSON structure, where you can mention the following information. You can also use a predefined template (**Configurations > Templates) or use the default one.

  • Template name
  • Template description
  • SLUG to identify the template
  • Template is enabled or not

  Here is a snapshot of the default template:

    {
     "name": "Ratings and Reviews",
    "description": "Ratings and Reviews",
    "slug": "products(ratings)",
    "enabled": true
    }

1. Click Next.
2. In Templates, configure the following:

• Product Template: You must define a template used to create and/or update products in Yotpo. The same template is used to create and/or update product variants in Yotpo. For information on product attributes that Yotpo supports, see Yotpo Product API Documentaion; you can add any of the supported product attributes within the request parameter in the template. Here is a snapshot of the default product template; however, you can modify this template based on your business requirements:

[
    $map(products, function($product) {
        {
            "request": {
                "sku": $product.attributes.sku,
                "external_id": $product.id,
                "name": $product.attributes.name,
                "description": $product.attributes.description,
                "status": $product.attributes.status = 'live' ? 'active' : 'draft',
                "handle": $product.attributes.slug,
                "image_url": $$.images[id=$product.relationships.main_image.data.id].link.href,
                "custom_properties": {
                    "is_blocklisted": $product.attributes.status = 'live' ? false : true
                }
            },
            "parent_product_id": $filter($product.attributes.base_product_id, function($e) { $e != '' })
        }
    })
]

• Order Template: You must define a template used to create and/or update orders in Yotpo. A default template is included; however, you can modify this template based on your business requirements. For information on the order attributes that Yotpo supports, see Yotpo Order API Documentation.
• Customer Template: You must define a template used to create and/or update customer information in Yotpo. For information on customer attributes that Yotpo supports, see Yotpo Customer API Documentaion; you can add any of the supported customer attributes in the template. For example, you can include the customer contact number in this template; so when customer information is sent to Yotpo, it will contain the contact number. Here is a snapshot of the default product template; however, you can modify this template based on your business requirements:

{
    "customer": {
        "external_id": payload.data.id,
        "email": payload.data.email,
        "first_name": $split(payload.data.name, ' ')[0],
        "last_name": $split(payload.data.name, ' ')[1],
        "account_status": "enabled",
        "account_created_at": payload.data.meta.timestamps.created_at
    }
}

1. Click Finish.

   The integration is complete and webhooks are created for the events that you have specified.

   • To see the webhooks that you have configured in Commerce Manager, click SYSTEM > Store Settings > Webhooks. Click each webhook to see the specifc events that you have added for products, orders, and customers.
   • To see the flows that you have configured for Yotpo integration in Commerce Manager, click SYSTEM > Flows > Ratings and Reviews.

Watch the following video to learn how to integrate Elastic Path Commerce Cloud with Yotpo using the Integrations Hub in Commerce Manager: