# Vanilla JS SDK

Our vanilla Javascript SDK is very similar to our ReactJS SDK. Instead of doing an `npm i` , you can integrate our SDK by importing from our CDN. Afterwards, you just need to interact with the `window.ramper` global object to gain access to most of the exported methods.\
\
Currently our vanilla JS SDK is in **beta preview** mode. There are a few minor bugs and refinements needed to reach full parity with our ReactJS SDK so please check back next week for updates. For any SDK design feedback, please contact the Ramper team.

{% tabs %}
{% tab title="EVM" %}

```html
<html>
<head>
  <script src="https://js.ramper.xyz/v1/ethereum"></script>
  <script src="https://cdn.ethers.io/lib/ethers-5.6.umd.min.js"
  type="application/javascript"></script>
</head>
<body>
  <script>
    window.onload = () => {
      window.ramper.init({
        appName: "Ethereum Test App",
        chainName: "ethereum",
        defaultTokenAddresses: [],
        theme: "dark",
        network: "maticmum",
        authProviders: ["twitter", "google", "facebook", "apple", "email"],
      })
    }
    
    async function signIn() {
      if (window.ramper.getUser()) {
        alert("Error: You are already signed in.")
        return
      }
      const userData = await window.ramper.signIn()
      console.log(userData)
    }

    function openWallet() {
      if (!window.ramper.getUser()){
        alert("Error: You are signed out.")
        return
      }
      window.ramper.openWallet()
    }

    async function sendTransaction() {
      console.log("Send Transaction using ether.js is in the process of being fully migrated to our Vanilla JS SDK. Please check back in 1-2 days.")

      if (!window.ramper.getUser()){
        alert("Error: You are signed out.")
        return
      }
      const wallet = window.ramper.getUser().wallets["ethereum"]

      const alchemy = new ethers.providers.AlchemyProvider(80001, 'pEWvHrkSkkyWGZmezdGMk_LjYu8DAx1k')
      const ramperSigner = await window.ramper.getRamperSigner(alchemy)
      try {
        if (!ramperSigner || !wallet) {
          throw new Error('No wallet')
        }

        const fromAddress = wallet.publicKey
        const toAddress = '0x1A2060a7469A5Df387e73dE3a9268763F4bE793d'
        const value = '0.00001'

        const tx = {
          type: 2,
          from: fromAddress,
          to: toAddress,
          value: ethers.utils.parseEther(value),
          chainId: 80001,
          nonce: alchemy.getTransactionCount(fromAddress),
          gasLimit: alchemy.estimateGas({
            to: toAddress,
            value: ethers.utils.parseEther(value),
          }),
          maxFeePerGas: alchemy.getFeeData().then((x) => x.maxFeePerGas),
          maxPriorityFeePerGas: alchemy.getFeeData().then((x) => x.maxPriorityFeePerGas),
        }
        console.log(tx)
        const signedTx = await ramperSigner.signTransaction(tx)
        const txResult = await alchemy.sendTransaction(signedTx)

        console.log('RESULTS ' + txResult.hash)
      } catch (ex) {
        console.log(ex)
      }
    }

    function signOut() {
      if (!window.ramper.getUser()){
        alert("Error: You are already signed out.")
        return
      }
      window.ramper.signOut()
    }
  </script>
  <button onclick="signIn()">Sign In</button>
  <button onclick="openWallet()">View Wallet</button>
  <button onclick="sendTransaction()">Send Transaction (Not Fully Ported)</button>
  <button onclick="signOut()">Sign Out</button>
</body>
</html>
```

{% endtab %}

{% tab title="Near" %}

```html
<!DOCTYPE html>
<html>
<head>
  <script src="https://js.ramper.xyz/v1/near"></script>
  <!-- Recommended you use `npm i --save near-api-js` instead -->
  <script src="https://cdn.jsdelivr.net/npm/near-api-js@0.41.0/dist/near-api-js.min.js"></script>
  <!-- Recommended you use `npm i --save bn.js` instead -->
  <script type="text/javascript" src="https://testdapp.ramper.xyz/bn.js"></script>
</head>
<body>
  <script>
    window.ramper.init({
      appName: "Near Test App",
      chainName: "near",
      defaultTokenAddresses: [],
      theme: "dark",
      network: "testnet",
      authProviders: ["twitter", "google", "facebook", "apple", "email"],
    });
    
    async function signIn() {
      if (window.ramper.getUser()) {
        alert("Error: You are already signed in.")
        return
      }
      const userData = await window.ramper.signIn()
      console.log(JSON.stringify(userData))
    }

    function openWallet() {
      if (!window.ramper.getUser()){
        alert("Error: You are signed out.")
        return
      }
      window.ramper.openWallet()
    }

    const experimental = true;

    async function sendTransaction() {
      const actions = [nearApi.transactions.transfer(new BN(10000000))]
      window.ramper.sendTransaction({
        toAddress: "02c49b4d1ce076c30c94bba082ec78e493915a6f84537b5fe7cb90ed56722d09",
        actions
      })
    }

    function signOut() {
      if (!window.ramper.getUser()){
        alert("Error: You are already signed out.")
        return
      }
      window.ramper.signOut()
    }
  </script>
  <button onclick="signIn()">Sign In</button>
  <button onclick="openWallet()">View Wallet</button>
  <button onclick="sendTransaction()">Send Transaction</button>
  <button onclick="signOut()">Sign Out</button>
</body>
</html>
```

{% endtab %}
{% endtabs %}


---

# 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://docs.ramper.xyz/embedded-wallet-sdk/quickstart/for-web-apps/version-1/sdk-specifications/vanilla-js-sdk.md?ask=<question>
```

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.
