ここでは「SOBAフレームワーク・クラウド」の管理画面から生成出来る各ウィジェット（パーツ）のHTMLコードのカスタマイズの解説、およびオプションの解説をします。
各パーツはオプションによって動作などをカスタマイズすることができます。オプションは取得したタグの<div>タグに属性を指定することによって利用することができます。
パーツタグの概要・用語
下記のような例を用いて各パーツの動作手順を解説します。
<div id="soba-widget-publisher-%channel%"></div>
<script src="https://widgets.soba-project.com/apps/%appid%/videos/%channel%/publisher.js?v=3" type="text/javascript"></script>
%channel%（チャンネル）
チャンネルとは、1組のパーツを管理する英数字のパラメータです。同一のチャンネルが指定されている場合に、指定されたパーツ内容の送受信を行う事が出来ます。
チャンネルの値は任意にご指定可能です（必ず英字から開始して下さい）。
▼ パーツタグの取得で作成されたウィジェットHTMLの一例
<div id="soba-widget-chat-jZe1cBpM8wwkTZGi"></div>
<script src="https://widgets.soba-project.com/apps/ZVxGAdxLhFSzYQlq/chats/jZe1cBpM8wwkTZGi/chat.js?v=3" type="text/javascript"></script>
上記のjZe1cBpM8wwkTZGiの部分を、<%channel%>と呼んでいます。<%channel%>とは、各パーツを結びつける役割をしているパラメータです。例えば、チャットパーツであれば、<%channel%>の値が同じパーツ同士でメッセージのやり取りが行えます（設置数は無制限です）
<%channel%>の値は任意に指定して頂く事が可能です。例えば、<%channel%>を分かりやすく社名（例：SOBA）に変更してご使用頂くような場合は下記のようになります。
※ ただし、先頭は英字から始め、半角英数字（大文字・小文字）の文字列で設定してください。
<div id="soba-widget-chat-SOBA"></div>
<script src="https://widgets.soba-project.com/apps/ZVxGAdxLhFSzYQlq/chats/SOBA/chat.js?v=3" type="text/javascript"></script>
%appid%（AppID）
AppIDとは、SOBA フレームワーク・クラウドに登録のある利用可能なドメインを管理するIDです。 パーツタグの取得後、AppIDをご確認頂けます。
▼ パーツタグの取得で作成されたウィジェットHTMLの一例
<div id="soba-widget-chat-jZe1cBpM8wwkTZGi"></div>
<script src="https://widgets.soba-project.com/apps/ZVxGAdxLhFSzYQlq/chats/jZe1cBpM8wwkTZGi/chat.js?v=3" type="text/javascript"></script>
上記のZVxGAdxLhFSzYQlqの部分を、<%appid%>と呼んでいます。<%appid%>とは、SOBAフレームワーク・クラウドに登録のある利用可能なドメインを管理するIDです。例えば、SOBAフレームワーク・クラウドに登録のある利用可能なドメインのURLがhttps://sfc.soba-project.com/であれば、ZVxGAdxLhFSzYQlqが<%appid%>です。
つまり、パーツタグの取得の際に登録したWebサイトURLに紐づくAppIDと生成されたコードの<%appid%>が一致しない場合、SOBAフレームワーク・クラウドは動作しません。
パーツタグの取得を正しく作成すると、上記の例のようなコードが生成され、コードのAppIDの部分からWebサイトに紐づけられたAppIDがご確認頂けます。また、ログイン時にアプリケーションのチャンネルタブを選択してウィジェットの「名前」部分で、AppIDを確認することもできます。
WebRTCメディアのパーツとオプション
WebRTCメディアパーツは、WebRTCでWebカメラ等の映像とマイクの音声を配信および受信する機能を提供します。
Webカメラが必須で、WebRTC対応ブラウザのみ利用可能です（Google Chromeでの利用を推奨）。
▼ WebRTCメディアパーツの取得で作成されたウィジェットHTMLの一例
<div id="soba-widget-webrtc-media-publisher-<%channel%>" data-id="2"></div>
<script src="https://widgets.sobaproject.com/apps/<%appid%>/webrtc_media/<%channel%>/webrtc_media_publisher.js?v=3" type="text/javascript"></script>
※ <%channel%>と<%appid%>の部分は、実際には各パラメータ値が入ります。
オプション
オプションは取得したタグの<div>タグに属性を指定することによって利用することができます。
映像ディスプレイの表示解像度（幅・高さ）の変更、映像の滑らかさを操作するフレームレートの変更、マイクの無効化、カメラの解像度（幅・高さ）の変更などのオプション機能があります。
チャットのパーツとオプション
チャットパーツではテキストチャットの機能を提供します。
▼ チャットパーツの取得で作成されたウィジェットHTMLの一例
<div id="soba-widget-chat-<%channel%>"></div>
<script src="https://widgets.soba-project.com/apps/<%appid%>/chats/<%channel%>/chat.js?v=3" type="text/javascript"></script>
※ <%channel%>と<%appid%>の部分は、実際には各パラメータ値が入ります。
オプション
オプションは取得したタグの<div>タグに属性を指定することによって利用することができます。
表示ユーザーのユーザーID変更、チャットの表示サイズ（幅・高さ）の変更などのオプション機能があります。
スライドのパーツとオプション
スライドパーツはプレゼンテーションで使用するようなスライドの機能を提供します。
スライドに表示した資料の上に自由に書き込める「お絵描き機能」も標準搭載しており、「お絵描き機能」を単独でご利用いただくこともできます。
▼ スライドパーツの取得で作成されたウィジェットHTMLの一例
<div style="width:100%;height:100%;">
<div id="soba-widget-whiteboard-<%channel%>" data-widgets-appkey="<%appid%>" data-mode="widgets" data-tools="show" data-room-id="1" style="width:100%;height:100%;"></div>
<script src="https://widgets.soba-project.com/apps/<%appid%>/whiteboards/<%channel%>/whiteboard.js" type="text/javascript"></script>
</div>
※ <%channel%>と<%appid%>の部分は、実際には各パラメータ値が入ります。
オプション
オプションは取得したタグの<div>タグに属性を指定することによって利用することができます。
スライドの表示サイズ（幅・高さ）の変更のほか、複数のオプションがあります。
