今回はTeachableでフォームなど他のコンテンツをレクチャーの中に埋め込む方法を解説します。
今回お届けするノウハウはこちら
Step1. Teachableでレクチャーに埋め込めるもの
Teachableのレクチャーにどんなものを埋め込めるかというと、まずビデオプレーヤーです。YouTubeやVimeoで埋め込みリンクがありますよね。2つ目はオーディオプレーヤーですね。オーディオプレーヤーもHTMLのタグを発行してくれてページに埋め込めたりできますよね。3つ目はウェビナー/ライブビデオです。ライブストリームともいいますね。YouTube、Vimeo、最近はTwitchもありますよね。4つ目は入力フォームです。僕たちはよくTypeformを使っているのですが、GoogleフォームもSurveyMonkeyも使うことができます。今回は GoogleフォームとTypeformを実際にやってみようかなと思います。
Step2. Googleフォームをレクチャーに埋め込む
ではTeachableで該当のコースに行ってもらって、Carriculumで新しいレクチャーを追加してください。そうしたらここにAdd Custom Codeというものがあります。ここをクリックしてもらうと、custom HTML、CSS、JavaScriptをこの中に入れてねと書いています。まずGoogleフォームのほうをやってみましょうか。テスト用のGoogleフォームを作ってあります。右上の「送信」というところに行くとHTMLのタグがあるので、これをクリックしてコピーします。そして貼り付けてください。Add custom codeをクリックします。間違ってPublishを先に押すと消えてしまうので気を付けてください。ではPublishを押してプレビューします。そうするとこのように埋め込むことができました。
Step3. Typeformをレクチャーに埋め込む
次はTypeformですね。新しくレクチャーを作るのは先ほどと同じです。この中にカスタムコードを入れていくのですが、Typeformの場合はここにあるShareに行きます。Embed in a web pageでFull-pageを試してみましょうか。デザインはいろいろと選べますが、今回は置いといてコードをコピーします。Get the Codeから、Copy Codeというボタンがあるので一発でコピーできます。これを入れて、Add custom codeをクリックします。ではPublishを押してプレビューします。そうするとこのように埋め込むことができました。
Step4. Vimeoの動画をレクチャーに埋め込む
最後は1つくらいビデオをやりたいのでVimeoをやりましょう。新しいレクチャーを作りました。前のものは消してしまいます。動画の右上にある埋め込みというところをクリックしてください。そうすると埋め込みコードがコピーされましたと表示されます。どちらがいいかは選んでください。僕はレスポンシブのほうがいいかなと思います。埋め込みコードをコピーをクリックして貼り付けます。少し時間が掛かっていますね。ではPublishを押してプレビューします。そうするとこのようになります。埋め込み他の形式も同じように埋め込みできます。いろいろと埋め込んでみてあげてください。今回は以上です。
