---
description: >-
  A lite version of Cetus Aggregator that can be embedded in to any website and
  dApp
---

# Cetus Terminal

### **Demo**&#x20;

[https://terminal.cetus.zone/](https://terminal.cetus.zone/)

### To use it in HTML

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Terminal</title>
  <link rel="stylesheet" href="https://archive.cetus.zone/assets/terminal/style.css">
  <script src="https://archive.cetus.zone/assets/terminal/main.js"></script>
</head>
<body>
  <div id="cetus-terminal"></div>
  <script>
    window.CetusSwap.init({
      containerId: "cetus-terminal",
      independentWallet: true,
      displayMode: 'Integrated',
    });
  </script>
</body>
</html>

```

Replace the script section with the code snippet generated in your own demo to get your html code.

### Install from NPM and use it in your react project

[https://www.npmjs.com/package/@cetusprotocol/terminal](https://www.npmjs.com/package/@cetusprotocol/terminal)

To use the components in the `@cetusprotocol/terminal`, wrap your app with the providers shown in the following example. The props available on the providers are covered in more detail in their respective pages.

```jsx
import { createNetworkConfig, SuiClientProvider, WalletProvider } from'@mysten/dapp-kit';
import { getFullnodeUrl } from'@mysten/sui/client';
import { QueryClient, QueryClientProvider } from'@tanstack/react-query';

// Config options for the networks you want to connect to
const { networkConfig } =createNetworkConfig({
  mainnet: { url:getFullnodeUrl('mainnet') },
});
constqueryClient=newQueryClient();

functionApp() {
  return (
    <QueryClientProviderclient={queryClient}>
		<SuiClientProvidernetworks={networkConfig} defaultNetwork="localnet">
			<WalletProvider>
			     <YourApp />
			</WalletProvider>
		 </SuiClientProvider>
    </QueryClientProvider>
  );
}
```
