ブログ

Kotaeを自分のウェブサイトに埋め込む方法

Kotae Marketing Team

2025/10/09

ステップ1: Kotaeを表示させたい場所を決める

Kotaeウィジェットは、追加したいページのヘッダーエリアにKotaeの埋め込みコードを配置するだけで、任意のページに追加することが可能です。ヘッダーエリアは、ページが読み込まれる際に最初に実行される部分のことです。

Webflow・Wix・Squarespaceなどのウェブサイトビルダーを使用している場合は、「カスタムコード」「ヘッダーコード」「詳細設定」などの名称が付いた設定を探してください。ページ設定またはサイト設定内にあることが多いです。「Head code」または「Header code」といったセクションに、Kotaeの埋め込みコードを貼り付けます。

コードで構築されたウェブサイトの場合は、Kotaeを表示させたいページのHTMLファイル(例: index.html、about.html)を開き、以下のように記述されている<head>内を探します。

Website Header Code Example

ステップ2: Kotae埋め込みコードを取得する

貼必要なコードを取得するには:

  1. サイドバーの「Publish」をクリック

  2. 「Embed Code」を探す

  3. 組織専用のコードをコピー

以下のような形式になっています:

<script
  id="kotae-embed-js"
  type="text/javascript"
  src="https://app.kotae.ai/embed/index.min.js"
  data-cid="123456789abcdefg123456789"
  defer>
</script>

<link
  id="kotae-embed-css"
  rel="stylesheet"
  href="https://app.kotae.ai/embed/index.min.css"
/>
<script
  id="kotae-embed-js"
  type="text/javascript"
  src="https://app.kotae.ai/embed/index.min.js"
  data-cid="123456789abcdefg123456789"
  defer>
</script>

<link
  id="kotae-embed-css"
  rel="stylesheet"
  href="https://app.kotae.ai/embed/index.min.css"
/>

これはあなたのサイトにKotaeウィジェットを追加するためのコードです。このコードは固有の識別子を含んでおり、Kotaeにあなたのアカウントであると認識させるために、コード全体をコピーしてください。


ステップ3: コードをウェブサイトのヘッダーに貼り付ける

ウェブサイトのヘッダーセクションが見つかり、Kotaeコードの準備ができたら、Kotaeを表示したいページの <head></head>の間に貼り付けます。

貼り付け後のヘッダーコードは以下のような形になります。

Website Header Code with Kotae Example

ステップ4: 保存して公開する

コードを貼り付けたら、変更内容を保存してください。ウェブサイトプラットフォームによって、「保存する」「更新する」「公開する」などのボタンが表示されます。保存後、変更内容を公開する必要があります。保存と公開が分かれている場合もあれば、自動的に反映される場合もあります。

以上です。ウェブサイトを開いて、Kotaeウィジェットが表示されるか確認してみてください。反映まで数分かかったり、ブラウザキャッシュをクリア(ページの更新)する必要がある場合もあります。

まだお困りですか?

ウィジェットが表示されない場合は、まずページを更新してみてください。それでも解決しない場合は、コードが正しくコピー・貼り付けできているか確認しましょう。もしまだ問題があれば、Kotaeサポートまでお気軽にご相談ください。丁寧にサポートいたします。