How to install

Installing Rosetta.ai service is easy. You have 2 choices to make it.

Option 1: you want to use only the SDK

If you want to customize the product recommenders in your UI, and you just need the product recommendation data, then you don't need to use our Plugin component, and Option 1 is your option!

Import SDK v1.0 file in your website.

Just paste the following snippet into the <head> tag of all the pages in your website where you want to use the SDK, and.... you are done with the installation!!! 🎉

<script src='https://s3-ap-southeast-1.amazonaws.com/plugins.rosetta.ai.prod/sdk-1.0.js' defer></script>

Option 2: you want to use both plugin and SDK

This is your option when you don't want to develop the recommendation boxes, and you just want to use our great Plugin (UI component for showing recommended products).

IMPORTANT: The plugin file already include all the SDK functions, so DO NOT import the SDK file and the plugin file at the same time. If you have imported the SDK file, please remove it.

You can import the plugin file with the 2 ways:

● Import the file by yourself

Insert the code below into the <head> tag of the website * Remember to replace the {{appId}} with your own app ID.

<script src='https://static.rosetta.ai/c/{{appId}}.js' defer></script>

● Import the file by webapp (through GTM)

Go to the settings page in Web App and click the Authenticate with GTM button in Configuration.

The plugin file will help you initialize the whole settings. You could start using the SDK command after the service is initialized.

If the service has initialized, the variable rosettaData in the window will be valuable; If it hasn't initialized, it would be undefined. However, you could insert a value to the key onCallback into window.rosettaData. Once the service is initialized, it will run onCallback in window.rosettaData automatically.

You can write down your commands or somethig you want to do after the Rosetta service initialized into onRosettaCallback function to make sure it will be run when the service is ready by the code below.

const onRosettaCallback = () => {
  //...config & query commands
}
if (window.rosettaData) onRosettaCallback()
else {
  window.rosettaData = {
    onCallback: onRosettaCallback,
  }
}
PreviousSDK v1.0 (latest version)NextHow to use

Last updated