> ## Documentation Index > Fetch the complete documentation index at: https://docs.phantom.com/llms.txt > Use this file to discover all available pages before exploring further. # Vanilla JavaScript > Step-by-step guide to integrating Phantom Connect with plain JavaScript and no framework. Complete guide to integrating Phantom Connect using plain JavaScript. ## 1. Install the Browser SDK ```bash theme={null} npm install @phantom/browser-sdk @solana/web3.js ``` ## 2. Initialize the SDK ```typescript theme={null} // wallet.ts import { BrowserSDK, AddressType } from "@phantom/browser-sdk"; // These functions are defined in main.ts declare function updateUI(address: string): void; declare function showConnectButton(): void; export const sdk = new BrowserSDK({ providers: ["google", "apple", "injected"], appId: "your-app-id", // Get from phantom.com/portal addressTypes: [AddressType.solana], authOptions: { redirectUrl: "https://yourapp.com/callback.html", }, }); // Set up event listeners sdk.on("connect", (data) => { console.log("Connected:", data.addresses); updateUI(data.addresses[0].address); }); sdk.on("disconnect", () => { console.log("Disconnected"); showConnectButton(); }); // Try to restore existing session sdk.autoConnect(); ``` ## 3. Create the HTML ```html theme={null} My App

Welcome

``` ## 4. Add the JavaScript ```typescript theme={null} // main.ts import { sdk } from "./wallet"; // Connect buttons document.getElementById("connect-google")!.onclick = () => { sdk.connect({ provider: "google" }); }; document.getElementById("connect-apple")!.onclick = () => { sdk.connect({ provider: "apple" }); }; document.getElementById("connect-extension")!.onclick = () => { sdk.connect({ provider: "injected" }); }; // Sign message document.getElementById("sign")!.onclick = async () => { const { signature } = await sdk.solana.signMessage("Hello!"); alert("Signature: " + signature); }; // Disconnect document.getElementById("disconnect")!.onclick = () => { sdk.disconnect(); }; // UI helpers function updateUI(address: string) { document.getElementById("disconnected")!.style.display = "none"; document.getElementById("connected")!.style.display = "block"; document.getElementById("address")!.textContent = address; } function showConnectButton() { document.getElementById("disconnected")!.style.display = "block"; document.getElementById("connected")!.style.display = "none"; } ``` ## 5. Create the callback page ```html theme={null} Connecting...

Connecting to Phantom...

``` ## 6. Configure Phantom Portal 1. Go to [phantom.com/portal](https://phantom.com/portal) 2. Create or select your app 3. Add your domain to allowed URLs 4. Add your callback URL to redirect URLs 5. Copy your App ID