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

# DingTalk会議 Web版iframe統合ガイド

> DingTalk会議をiframeでWebページに埋め込む方法を解説します。必要なpostMessageイベント、許可するorigin、サンドボックス属性、親ページからの会議制御まで、面接・研修などのカスタムシーンに対応する手順を紹介します。

DingTalk会議 Web版は、**iframe** を使用してビジネスサイトに埋め込むことができ、面接、採用、企業研修などのカスタマイズされたサービスシーンに対応します。

## 利用条件

1. DingTalk会議 Web版が必要です。

2. 会議メンバーシップ、クラウド会議室、プロフェッショナル版、専用版などの有料バージョンが必要です。

DingTalk会議の有料プランでは、時間無制限の会議と10種類以上の特典が利用できます。該当するDingTalk会議の購入ページから、購入やご相談ができます。

## ユースケース：面接・採用

DingTalk会議のiframe統合により、面接サイトの任意の場所に会議画面を埋め込み、いつでもビューを切り替えられます。また、ユースケースに応じて不要なボタンや機能を非表示にでき、権限管理が容易になります。

## Webサイトへの統合方法

iframeによる埋め込みは簡単です。HTMLページにDingTalk会議のiframeタグを挿入します。

基本的な例：

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<iframe 
  src="https://meeting.dingtalk.io/app/room?linkId={:linkId}" 
  allow="camera; microphone; display-capture">
</iframe>
```

iframeでDingTalk会議 Web版を統合した後、URLパラメータとメッセージパッシングを使用してUIをカスタマイズし、会議中の情報を取得できます。具体的なAPIについては、DingTalkの相談チャンネルを通じて完全な開発者ドキュメントをリクエストしてください。

## カスタムUI

この機能では、共有ボタンや招待ボタンなど、会議ページのUIコンポーネントの表示・非表示をカスタム設定できます。

例：

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<iframe 
  src="https://meeting.dingtalk.io/app/room?linkId={:linkId}&invite=0&screen_share=0" 
  allow="camera; microphone; display-capture">
</iframe>

<!-- 共有ボタンと招待ボタンは、URLパラメータによって非表示にされます。 -->
```