# How to install
### 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 `` tag of all the pages in your website where you want to use the SDK, and.... you are done with the installation!!! 🎉
```html
```
### 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).
{% hint style="danger" %}
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.
{% endhint %}
#### You can import the plugin file with the 2 ways:
**● Import the file by yourself**
Insert the code below into the `` tag of the website\
\* Remember to replace the {{appId}} with your own app ID.
```html
```
**● Import the file by webapp (through GTM)**
Go to the **settings page** in **Web App** and click the **`Authenticate with GTM` button** in **Configuration**.
click the Authenticate with GTM button
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.
```javascript
const onRosettaCallback = () => {
//...config & query commands
}
if (window.rosettaData) onRosettaCallback()
else {
window.rosettaData = {
onCallback: onRosettaCallback,
}
}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://rosetta-ai.gitbook.io/sdk/rosetta.ai-sdk-developers-guide/sdk-v1.0-latest-version/how-to-install.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.