> ## Documentation Index
> Fetch the complete documentation index at: https://www.mellowtel.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Mellowtelであなたのウェブサイトを収益化
> 訪問者が未使用の帯域幅を共有することを選択してあなたをサポートできるように、1つのスクリプトタグを追加します。
Mellowtelは、訪問者が未使用の帯域幅を共有することを選択してあなたをサポートできるようにします。あなたはサイトに小さなウィジェットを追加し、訪問者はコンパニオン拡張機能をインストールすることを選び、彼らのブラウザが処理するリクエストに基づいて収益を得ます。
**推定時間:** 5〜10分。 **必要なもの:** [Mellowtelアカウント](https://www.mellowtel.com/mellowtel-auth/)とサイトのHTML（または同等のフレームワーク）へのアクセス。
## 仕組み
スクリプトタグがあなたのサイトにボタン、アイコン、またはバナーを表示します。
彼らはMellowtelコンパニオン拡張機能をインストールするページに移動します。
あなたの`invite_id`がその訪問者をあなたのアカウントにリンクし、彼らのブラウザが処理するリクエストがあなたに帰属します。
## 始める前に
* Mellowtelアカウント。[こちらでサインアップ](https://www.mellowtel.com/mellowtel-auth/)してください。
* サポートリンクを作成した後に[ダッシュボード](https://www.mellowtel.com/mellowtel-auth/)で見つかるあなたの`invite_id`。
* サイトのHTMLへのアクセス、またはフレームワークやCMSを通じて`
```
```jsx Next.js (App Router) theme={null}
import Script from 'next/script'
export default function Layout({ children }) {
return (
{children}
)
}
```
```jsx React (Vite / CRA) theme={null}
import { useEffect } from 'react'
export function MellowtelWidget() {
useEffect(() => {
const s = document.createElement('script')
s.src = 'https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID'
s.async = true
document.body.appendChild(s)
return () => { s.remove() }
}, [])
return null
}
```
```html WordPress theme={null}
```
```html Webflow / Shopify theme={null}
```
## 設定オプション
スクリプトURLのクエリパラメータを通じてウィジェットの外観を制御します。
| パラメータ | 必須 | 値 | 説明 |
| ----------- | -- | ------------------------------------------------------ | ------------------------ |
| `invite_id` | はい | ダッシュボードからのあなたのID | 収益をあなたのアカウントに帰属させます。 |
| `type` | はい | `button`, `icon`, `banner` | あなたのサイトに表示されるウィジェットスタイル。 |
| `position` | はい | `bottom-right`, `bottom-left`, `top-right`, `top-left` | ページ上でのウィジェットの位置。 |
出荷前にすべての組み合わせをライブでプレビュー: [ウィジェットプレビューを開く](https://cdn.mellow.tel/preview?position=bottom-right\&type=button\&invite_id=ijxf49s9h2f)。URLの`type`と`position`パラメータを入れ替えて各バリエーションを確認してください。
## 動作確認
新しいブラウザタブ（またはキャッシュをバイパスするためのシークレットウィンドウ）でページを開きます。
選択した位置にボタン、アイコン、またはバナーが表示されるはずです。表示されない場合は、ブラウザコンソールでブロックされたリクエストを確認してください。
ウィジェットをクリックすると、`invite_id`が付いた拡張機能インストールページに移動するはずです。
訪問者がインストールしてオプトインすると、そのアクティビティがあなたのMellowtelダッシュボードに表示されます。
## トラブルシューティング
* スクリプトタグが``内にあり、`invite_id`が入力されていることを確認してください。
* DevToolsを開き、ネットワークタブで`cdn.mellow.tel/widget.js`へのリクエストを確認してください。ブロックされている場合、広告ブロッカーやコンテンツフィルターが原因である可能性があります。
* コンテンツセキュリティポリシーを確認してください。`script-src`で`https://cdn.mellow.tel`を許可する必要があるかもしれません。
`invite_id`パラメータが空であるか、リテラルの`INVITE_ID`プレースホルダーがまだ含まれています。ダッシュボードから実際の値をコピーしてURLに貼り付けてください。
多くの場合、CSPまたはCDNルールがスクリプトを削除しています。本番ホストのレスポンスヘッダーを確認し、`cdn.mellow.tel`を許可リストに追加してください。
`