awoo SDK Installation

🫀 Integrate SDK Manager (aaio)

Our SDK Manager (aaio) is an essential part to have awoo components, such as related tags and product recommendations, properly shown on your webpage. It controls how awoo components are rendered and their communication with our servers. Hence, the very first part to install awoo AMP functionality is to integrate it! We recommend you to add the provided JavaScript code —adjusted to include your {awoo ID} — to all pages of your website without additional modification.

<script type="text/javascript" src="https://api.awoo.org/libs/{awoo ID}/aaio-latest.min.js" async></script>

For optimum performance, we suggest inserting SDK Manager (aaio) between the <head> and </head> HTML tags of your website. Load the SDK Manager (aaio) as long as there is any awoo component you want, such as awoo tag or product recommendation, on that particular page. Once the code is loaded, SDK Manager (aaio) will render awoo component based on the HTML div you insert on page. Check the table below to see how each awoo AMP functionality is related to a specific HTML div:

awoo AMP Functionality	HTML Tag to Insert on Page	Pathname Example	Need to Set Value Dynamically?	Need Extra Blank Page?
Home Page - Popular Tag	`<div class="awoo-keyword-popular-tags"></div>`	"/"	➖	➖
Home Page - Popular Product	`<div class="awoo-keyword-popular-products"></div>`	"/"	➖	➖
Product Page - Related Tag	`<div class="awoo-product-tags"></div>`	"/products/{product-id}"	✅	➖
Product Page - Related Product	`<div class="awoo-related-products"></div>`	"/products/{product-id}"	✅	➖
Category Page - Related Tag	`<div class="awoo-classify"></div>`	"/categories/{category-name}"	✅	➖
awoo Page	`<div id="awoo-category-page"></div>`	"/categor?tags={tag1},{tag2}"	➖	✅
Site Search	`<div class="awoo-search"></div>` `<div id="awoo-search-result-page"></div>`	all pages	➖	✅
Cart Page - Related Product	`<div class="awoo-cart-related-products"></div>`	"/cart"	✅	➖
Checkout Page - Related Product	`<div class="awoo-complete-related-products"></div>`	"/checkouts"	✅	➖
404 Not Found Page - Popular Product	`<div class="awoo-not-found-products"></div>`	"/PageNotFound"	➖	➖
Search No Result Page - Popular Product	`<div class="awoo-no-result-products"></div>`	"/SearchNoResult"	➖	➖
	swipe right for more info -->

🚧
Making Sure It's truly You!
We use your domain name to determine whether it's you, our lovely customer, is requesting information through SDK Manager (aaio). Hence, you must provide your site domain on which you would like to use awoo AMP functionality (see step 1. in the overview above.)

👍
Adding Your Own CSS!
You can adjust the appearance of tags or product recommendation rendered by the SDK Manager (aaio) by adding your own CSS styles. As long as the defined class name exists/remains the same, awoo component will correctly rendered.

📘
Discuss with Us!
If you have any question about setting up blank page, or using JavaScript to extract value dynamically, feel free to reach out! Let's work together to make sure you make the best use of awoo AMP.

⏬
Check Following Sections for More Details!

👀 Home Page - Popular Tag

In order to showcase popular tags of your website, insert the following HTML div on your website's home page. You are able to customize div title (shown as "title is customizable" in the picture below,) and the quantity of tag. Contact your awoo agent to configure those settings. Also explore the API and its details that powers this functionality.

<div class="awoo-keyword-popular-tags"></div>

👀 Home Page - Popular Product

In order to showcase popular products of your website, insert the following HTML div on your website's home page. You are able to customize div title (shown as "title is customizable" in the picture below,) and the quantity of product. Contact your awoo agent to configure those settings. Also explore the API and its details that powers this functionality.

<div class="awoo-keyword-popular-products"></div>

<div class="awoo-keyword-popular-products" no-swiper></div>

👂🏼 Product Page - Related Tag

In order to present related tags of a particular product, insert the following HTML div on your product page. You are able to customize recommend direction (see explanations: recommend between categories.) Contact your awoo agent to configure this setting. Also explore the API and its details that powers this functionality.

There are one configuration you should specify in the header of the product page. Please use JavaScript to set value dynamically: productId (required) specifies ID of the product shown on the page. Examine the code below.

<div class="awoo-product-tags"></div>

window.awooConfig = Object.assign(window.awooConfig || {}, {
  productId: {product_id}
});

❗️
Format of "productId" Must be Matched!
Please notice that "productId" set in the header must have the same format as those set in the datafeed.

👂🏼 Product Page - Related Product

In order to present related products of a particular product, insert the following HTML div on your product page. You are able to customize recommend direction (see explanations: recommend between categories,) div title for both recommend direction (shown as "title is customizable" in the picture below,) and the quantity of related product. Contact your awoo agent to configure those settings. Also explore the API and its details that powers this functionality.

There are two configurations you should specify in the header of the product page. Please use JavaScript to set value dynamically: productId (required) specify ID of the product shown on the page, and productType (optional) restrict all recommendations to be in specified category. Examine the code below.

<div class="awoo-related-products"></div>

<div class="awoo-related-products" no-swiper></div>

window.awooConfig = Object.assign(window.awooConfig || {}, {
  productId: {product_id},
  productType: {desired_category}
});

Related Product on product page (rendered)

❗️
Beware of Format!
Please notice that "productId" and "productType" set in the header, must have the same format as those set in the datafeed.

🍞 Category Page - Related Tag

In order to present related tags for a particular category, insert the following HTML div on your category page. You are able to customize the path of your category page (depends on your website design.) Contact your awoo agent to configure this setting. Also explore the API (this one, and this one) and their details that power this functionality.

There are two configurations you should specify in the header of the category page. Please use JavaScript to set value dynamically: productType specifies the category name of the category page, classifyProductIds specifies all products that shown on the category page. Examine the code below.

Please noted that you should have either productType or classifyProductIds specified to retrieve related tags for that particular category page. If none of them is specified, SDK Manager (aaio) will automatically search for HTML elements with the attribute "data-awoo-pid" (if exist.) It will then fetch the PID and render the div.

<div class="awoo-classify"></div>

window.awooConfig = Object.assign(window.awooConfig || {}, {
  productType: {category},
  classifyProductIds: {product_id_1, product_id_2, product_id_3, ...},
});

🧠 awoo Page

In order to render an awoo Page, you should setup a separated blank page with standalone page path. Just insert the following div on the blank page, and SDK Manager (aaio) will render all required HTML components for you. Remember to share the URL of this blank page with us, we need to set path configuration for you to have awoo Page correctly rendered.

You are able to customize div title for related tags (shown as "title is customizable" in the picture below,) the quantity of product shown, the sorting method (see explanations for all sorting methods), and whether to show out-of-stock info. Please contact your awoo agent to configure those settings. Also explore the API and its details that powers this functionality.

<div id="awoo-category-page"></div>

🚧
Concerning the Sorting Method
Make sure you have corresponding product info specified in the datafeed, to use your desired sorting method. For example, if you want to sort by popularity, then you should have popularity specified for every product in the datafeed.

☄️
awoo Page V2
The latest awoo page powered by API Page V2 further provides tag filter to let users better narrow their shopping intent. Dive right in to check out our flagship functionality awoo Page V2!

👣 Site Search & Term Suggestion

In order to utilize awoo Site Search & Term Suggestion, insert the following HTML div on all webpages where you would like an awoo Site Search bar. For Site Search customization, you are able to customize quantity of search result, the page title of the search result page, and the sorting method (order by price, order by update time, or order by product created time.) For Term Suggestion customization, you are able to customize div title (shown as "title is customizable" in the picture below,) and quantity of previewed product. Contact your awoo agent to configure those settings. Also explore the API (this one and this one) and its details that power this functionality.

With awoo Site Search on, you should also setup a separated blank page with standalone page path for search result page. Insert the following HTML div on the blank page to let SDK Manager (aaio) render search result. Remember to share the URL of this blank page with us as well, we need to set path configuration to have your search result correctly rendered.

<div class="awoo-search"></div>

<div id="awoo-search-result-page"></div>

Site Search & Term Suggestion (rendered)

🚧
Standalone term suggestion is not provided
SDK Manager (aaio) doesn't provide standalone term suggestion. You should replace your original search functionality with awoo Site Search.

🛒 Cart Page - Related Product

In order to present related products of what your customers have put into their cart, insert the following HTML div on cart page. You are able to customize div title (shown as "title is customizable" in the picture below,) the quantity of related products, and the sorting method (latest product first, low price first, or products that fulfill the free-delivery price gap.) Contact your awoo agent to configure those settings. Also explore the API and its details that powers this functionality.

There are one configuration you should specify in the header of the cart page. Please use JavaScript to set value dynamically: relatedProductIds (required) specifies the ID of products that customers have in their cart. Examine the code below.

<div class="awoo-cart-related-products"></div>

<div class="awoo-cart-related-products" no-swiper></div>

window.awooConfig = Object.assign(window.awooConfig || {}, {
  relatedProductIds: {cart_item_1, cart_item_2, cart_item_3, ...}
});

💰 Thank You Page - Related Product

In order to present related products of what your customers have already checked out, insert the following HTML div on thank-you page. You are able to customize div title (shown as "title is customizable" in the picture below,) the quantity of related products, and the sorting method (latest product first, low price first, or products that fulfill the free-delivery price gap.) Contact your awoo agent to configure those settings. Also explore the API and its details that powers this functionality.

There are one configuration you should specify in the header of the checkout page. Please use JavaScript to set value dynamically: relatedProductIds (required) specifies the ID of products that customers have already checked out. Examine the code below.

<div class="awoo-complete-related-products"></div>

<div class="awoo-complete-related-products" no-swiper>></div>

window.awooConfig = Object.assign(window.awooConfig || {}, {
  relatedProductIds: {checkout_item_1, checkout_item_2, checkout_item_3, ...}
});

Related Product on checkout page (rendered) — Related Product on thank-you page (rendered)

🚫 404 Not Found Page - Popular Product

In order to show popular products on a 404-not-found page, insert the following HTML div. You are able to customize div title (shown as "title is customizable" in the picture below,) and the quantity of retrieved products. Contact your awoo agent to configure those settings. Also explore the API and its details that powers this functionality.

<div class="awoo-not-found-products"></div>

<div class="awoo-not-found-products" no-swiper></div>

Popular Product on 404-not-found page (rendered)

🚫 Search No Result Page - Popular Product

In order to show popular products on a search-no-result page, insert the following HTML div. You are able to customize div title (shown as "title is customizable" in the picture below,) and the quantity of retrieved products. Contact your awoo agent to configure those settings. Also explore the API and its details that powers this functionality.

<div class="awoo-no-result-products"></div>

<div class="awoo-no-result-products" no-swiper></div>

Popular Product on search-no-result page (rendered)

Edited by: Justin Sung