> ## Documentation Index
> Fetch the complete documentation index at: https://docs.halliday.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# SDK Widget Hello World

export const OpenHallidayDemoPage = () => {
  return <div>
            <style>{`
                .demoButtonContainer {
                    display: block;
                    margin: auto;
                    width: max-content;
                }
                .demoButton {
                    border: none;
                    opacity: 1;
                    background-color: rgb(var(--primary));
                    color: white;
                    font-weight: 500;
                    width: auto;
                    height: 50px;
                    border-radius: 8px;
                    display: inline-flex;
                    align-items: center;
                    padding: 10px 18px;
                    transition: all 0.2s ease;
                }
                .demoButton::before {
                    content: '';
                    width: 20px;
                    height: 20px;
                    margin-right: 10px;
                    background-color: currentColor;
                    mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOS4wNjggMjIuNDA4IiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImJhY2tncm91bmQ6IHRyYW5zcGFyZW50OyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwgLTYuNTc1KSI+PHBhdGggZD0iTSA2LjY4NiA2LjU3NSBDIDcuMjEgNi41NzUgNy42OTYgNi44NTUgNy45NiA3LjMxMyBMIDkuNjUyIDEwLjIzOCBMIDQuNTEyIDEwLjIzOCBDIDQuMDk4IDEwLjI0MiAzLjc2NSAxMC41OCAzLjc2NyAxMC45OTQgTCAzLjc2NyAyNC41NjUgQyAzLjc2NyAyNC45ODIgNC4xMDEgMjUuMzIxIDQuNTEzIDI1LjMyMSBMIDkuNjUzIDI1LjMyMSBMIDExLjQzOCAyMi4yMzcgQyAxMS42NDQgMjEuODgzIDEyLjAyIDIxLjY2MyAxMi40MjggMjEuNjYzIEwgMTYuNjM4IDIxLjY2MyBDIDE3LjA0NyAyMS42NjMgMTcuNDIxIDIxLjg4MiAxNy42MjggMjIuMjM3IEwgMTkuNDEyIDI1LjMxOSBMIDkuNjU3IDI1LjMxOSBMIDcuOTYzIDI4LjI0NSBDIDcuNjk3IDI4LjcwMyA3LjIxMyAyOC45ODMgNi42ODkgMjguOTgzIEwgMy41NzQgMjguOTgzIEMgMS42IDI4Ljk4MyAwIDI3LjM2MyAwIDI1LjM2NiBMIDAgMTAuMTkgQyAwIDguMTk0IDEuNiA2LjU3NSAzLjU3MSA2LjU3NSBaIiBmaWxsPSJyZ2IoMCwwLDApIi8+PHBhdGggZD0iTSAyNS40OTQgNi41NzUgQyAyNy40NjkgNi41NzUgMjkuMDY4IDguMTk0IDI5LjA2OCAxMC4xOTEgTCAyOS4wNjggMjUuMzcgQyAyOS4wNjggMjcuMzY3IDI3LjQ2OCAyOC45ODYgMjUuNDk0IDI4Ljk4NiBMIDIyLjM4IDI4Ljk4NiBDIDIxLjg1NCAyOC45ODYgMjEuMzY4IDI4LjcwNCAyMS4xMDYgMjguMjQ4IEwgMTkuNDEzIDI1LjMyMyBMIDI0LjU1NiAyNS4zMjMgQyAyNC45NjcgMjUuMzIzIDI1LjMwMiAyNC45ODMgMjUuMzAyIDI0LjU2NyBMIDI1LjMwMiAxMC45OTUgQyAyNS4zMDMgMTAuNzk2IDI1LjIyNSAxMC42MDQgMjUuMDg2IDEwLjQ2MyBDIDI0Ljk0NiAxMC4zMjEgMjQuNzU1IDEwLjI0MSAyNC41NTYgMTAuMjQgTCAxOS40MTYgMTAuMjQgTCAyMS4xMDcgNy4zMTMgQyAyMS4zNzEgNi44NTggMjEuODU2IDYuNTc3IDIyLjM4MiA2LjU3NSBMIDI1LjQ5NSA2LjU3NSBaIiBmaWxsPSJyZ2IoMCwwLDApIi8+PHBhdGggZD0iTSAxOS40MTMgMjUuMzIxIEwgMTkuNDEzIDI1LjMxOSBMIDE5LjQxNCAyNS4zMTkgTCAxOS40MTQgMjUuMzIxIFoiIGZpbGw9InJnYigwLDAsMCkiLz48cGF0aCBkPSJNIDE3LjYzMiAxMy4zMjQgTCAxNy42MyAxMy4zMjQgQyAxNy40MjYgMTMuNjc4IDE3LjA0OCAxMy44OTYgMTYuNjQgMTMuODk3IEwgMTIuNDIzIDEzLjg5NyBDIDEyLjAxNiAxMy44OTcgMTEuNjM5IDEzLjY4IDExLjQzMyAxMy4zMjQgTCA5LjY1MiAxMC4yNCBMIDE5LjQxNCAxMC4yNCBMIDE3LjYzMyAxMy4zMjMgWiIgZmlsbD0icmdiKDAsMCwwKSIvPjwvZz48L3N2Zz4=') no-repeat center;
                    mask-size: contain;
                    flex-shrink: 0;
                }
            `}</style>
            <div className="demoButtonContainer">
                <button className="demoButton" onClick={() => window.open('https://demo.halliday.xyz', '_blank', 'noopener,noreferrer')}>Try Halliday
                </button>
            </div>
        </div>;
};

The fastest way to implement Halliday is by utilizing the JS SDK widget user interface.

## Try the Halliday JS SDK Widget

Following this guide, or the [JS SDK Widget Documentation](/pages/payments-sdk-docs) guide will result in an onramp experience like in the following demo.

<OpenHallidayDemoPage />

### Integrate Halliday

Follow these steps to integrate Halliday in just a few minutes.

<Steps>
  <Step title="Obtain API Keys">
    <Note>
      To get set up with API access for Halliday, get a free API key at [dashboard.halliday.xyz](https://dashboard.halliday.xyz/).
    </Note>
  </Step>

  <Step title="Integrate">
    First, install the Halliday JS SDK into a web project.

    <Tabs>
      <Tab title="npm">
        ```shell copy theme={null}
        npm install @halliday-sdk/payments
        ```
      </Tab>

      <Tab title="yarn">
        ```shell copy theme={null}
        yarn add @halliday-sdk/payments
        ```
      </Tab>

      <Tab title="HTML">
        ```html copy theme={null}
        <script src="https://cdn.jsdelivr.net/npm/@halliday-sdk/payments@latest/dist/paymentsWidget/index.umd.min.js"></script>
        ```
      </Tab>
    </Tabs>

    Next, integrate Halliday into an existing application with a few lines of code. This example is in a React.js project with [Wagmi](https://wagmi.sh/).

    <Tabs>
      <Tab title="React">
        ```tsx copy theme={null}
        import { useEffect } from "react";
        import { openHallidayPayments } from "@halliday-sdk/payments";
        import { connectWalletClient } from "@halliday-sdk/payments/viem";
        import { useAccount, useWalletClient } from "wagmi";

        export default function App() {
          const { address, isConnected } = useAccount();
          const { data: walletClient, isSuccess } = useWalletClient();

          useEffect(() => {
            if (!isConnected || !isSuccess || !walletClient || !address) return;

            const userWallet = connectWalletClient(() => walletClient);

            openHallidayPayments({
              apiKey: HALLIDAY_API_KEY,
              outputs: ["base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913"],
              targetElementId: "halliday",
              destinationAddress: address,
              userWallet,
            });
          }, [isConnected, isSuccess, walletClient, address]);

          return <div id="halliday" />;
        }
        ```
      </Tab>

      <Tab title="HTML">
        ```html copy theme={null}
        <html>
        <body>
          <button id="connect-wallet">Connect Wallet</button>
        </body>
        <script src="https://cdn.jsdelivr.net/npm/@halliday-sdk/payments@latest/dist/paymentsWidget/index.umd.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@halliday-sdk/payments@latest/dist/paymentsWidget/ethers/index.umd.min.js"></script>
        <script>
          window.connectSigner = window.ethers.connectSigner;
        </script>
        <script src="https://cdn.jsdelivr.net/npm/ethers@6/dist/ethers.umd.min.js"></script>
        <script>
          document.getElementById('connect-wallet').addEventListener('click', async () => {
            window.ethereum = window.ethereum || window.phantom.ethereum;
            const [address] = await window.ethereum.request({ method: 'eth_requestAccounts' });

            const userWallet = connectSigner(() =>
              new ethers.BrowserProvider(window.ethereum).getSigner(),
            );

            hallidayPayments.openHallidayPayments({
              apiKey: HALLIDAY_PUBLIC_API_KEY,
              // USDC on Base
              outputs: ['base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'],
              userWallet,
              destinationAddress: address,
            });
          });
        </script>
        </html>
        ```
      </Tab>
    </Tabs>

    Run the app page and try onramping or swapping tokens with the newly implemented Halliday Payments Widget. Try it now using the **button** above.
  </Step>
</Steps>