なんでも簡単に設定できるSWELLでも、埋め込めなかったのがLINEのオープンチャット。
「iframe」というコードを使います。
ちょっと苦戦しましたが、ようやく埋め込めたのでその方法を紹介します。
![](https://pins-with.com/wp-content/uploads/2020/10/96d0325efe32b15cd3852ff508e77910.png)
コピペOKですよ♪
この記事でわかること
- オープンチャットの埋め込み方法
目次
オープンチャットをブログに埋め込む方法
![](https://pins-with.com/wp-content/uploads/2021/07/ea340b9dda8b893ddf2d9176220aac32.jpg)
たった3ステップでできますよ♪
オープンチャットの埋め込み方法
- カスタムHTMLをクリック
- コードをコピーして貼り付け
- 埋め込みたいオープンチャットのURLをコピーして貼り付け
それでは、1つずつ見ていきましょう♪
1.カスタムHTMLをクリック
ブロックを選択し、カスタムHTMLを選びましょう♪
![カスタムHTML](https://pins-with.com/wp-content/uploads/2021/07/0574646663936d96dfbfcbddfd41bcd7-1024x576.jpg)
2.コードをコピーして貼り付け
↓のコードをコピーしましょう。
「width」は幅、「height」は高さです。
<iframe id="inline-frame" width="600" height="750" title="ここにオープンチャットの名前" src="ここにオープンチャットのURL" <="" iframe=""></iframe>
![](https://pins-with.com/wp-content/uploads/2020/10/1a72e802471ecdfaba215961b85db841.png)
上をコピーして貼り付けるだけ♪
コピーしたら、カスタムHTMLの中に張り付けてくださいね♪
![カスタムHTMLに張り付け](https://pins-with.com/wp-content/uploads/2021/07/c272d47ef2a94c1214c9568e04cf3116.jpg)
↑こんな感じです。
3.埋め込みたいオープンチャットのURLをコピーして貼り付け
埋め込みたいオープンチャットのURLをコピーします。
トークルーム右上の「…」をクリックすると「招待」がでるのでクリック。
![](https://pins-with.com/wp-content/uploads/2021/07/631d1fdc664bcd2816deff8c55bb2a50-1024x576.jpg)
![](https://pins-with.com/wp-content/uploads/2021/07/06fa1fd6322de69654d72cdff38b73dc.jpg)
リンクをコピーするをクリック。
ここでコピーしたURLを
<iframe id="inline-frame" width="600" height="750" title="ここにオープンチャットの名前" src="ここにオープンチャットのURL" <="" iframe=""></iframe>
↑に貼り付けましょう!
![](https://pins-with.com/wp-content/uploads/2020/10/035b8e36d7e43c50f2104819b9c04589.png)
これでオープンチャット貼り付けは完了!
貼り付けたオープンチャットは↓のような感じです。
ブログにオープンチャットを埋め込んで、どんどん知ってもらいましょう♪
この記事を書いた人
![](https://pins-with.com/wp-content/uploads/2020/10/3157c3241f76489fee4d08f51d096782-1.png)
- 北海道在住の30代
- 13種類の資格保持者(資格コレクター)
- ピンズコレクター
- 北海道道の駅制覇(129カ所)
つっちー(@pinswith)