> For the complete documentation index, see [llms.txt](https://somnia-domain-services.gitbook.io/somnia-domain-services/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://somnia-domain-services.gitbook.io/somnia-domain-services/for-developers/example-website-integration.md).

# Example Website Integration

Here's how you can integrate Somnia Domain Services (SDS) into different types of applications.

### 🟦 React / Next.js

```jsx
import { useEffect, useState } from "react";
import { getPrimarySomName } from "@/lib/sds";

export function DisplayName({ address }: { address: string }) {
  const [name, setName] = useState<string | null>(null);

  useEffect(() => {
    getPrimarySomName(address).then(setName);
  }, [address]);

  return <span>{name || address}</span>;
}
```

### 🟨 Vanilla JS + HTML

```html
<script type="module">
import { getPrimarySomName } from "./lib/sds.js";

const address = "0x123...abc";
const element = document.getElementById("username");

getPrimarySomName(address).then(name => {
  element.textContent = name || address;
});
</script>

<span id="username">Loading...</span>
```

### 🟩 Node.js / Backend

```jsx
import { getPrimarySomName } from "./lib/sds";

async function resolveName(addr: string) {
  const name = await getPrimarySomName(addr);
  return name || addr;
}
```

### 🔁 Fallback Logic

Always use a fallback if the name is not registered:

```typescript
const display = somniaName || walletAddress;
```

This ensures your app never breaks.

***

> Next: Network details you’ll need for RPC access and smart contract connection.