# STUDIOやWordPressの、外部サイトにBubbleのアプリを埋め込む方法

**URL:** <https://www.nocode-faq.com/t/topic/4064>\
**Category:** bubble\
**Created:** [2023 年 12 月 8 日午後 4:10 UTC](https://www.nocode-faq.com/t/topic/4064 "2023-12-08T16:10:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ma1998](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/ma1998/32/3852_2.png) [@ma1998](https://www.nocode-faq.com/u/ma1998)\
**Post date:** [2023 年 12 月 8 日午後 4:10 UTC](https://www.nocode-faq.com/t/topic/4064/1 "2023-12-08T16:10:58Z")

</div>

[したいこと]  
WordPressやSTUDIO等の外部サイトにbubbleで作ったアプリを埋め込みたい  
例.STUDIO内にbubbleで作成したフォームを埋め込み、回答をbubbleの管理画面で管理する

[試してみたこと]  
iframeを使って埋め込むことができた。  
→フォームの場合、回答をしてもbubbleのデータは作成されない

※調べてみたところiframeはブラウザによって上手く処理できないとのこと

[参考資料]  
以下はSTUDIOにbubbleで作成したフォームをiframeで埋め込んでいる画像

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/b/bc4a07d689fdefdcfbdbf28d842a6d73d9a0e93a.png)

アプリを埋め込みデータの作成等を行う方法がわかる方がいましたら、ご教授いただければ幸いです。

---

<div class="post-metadata">

**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\
**Post date:** [2023 年 12 月 11 日午後 8:22 UTC](https://www.nocode-faq.com/t/topic/4064/2 "2023-12-11T20:22:03Z")

</div>

Bubbleのフォームをiframeとして表示し、データ取得する方法はわからないのですが、Googleフォームをiframe化して埋め込み、新しいデータがスプシに反映されたことをトリガーにzapierやmakeを使ってbubbleにデータ送ってみるのはどうでしょうか。  
もしくは、STUDIOのお問い合わせフォームを使用して、スプシに記録する方法もあると思います。

参考記事

> **[STUDIOのフォーム機能の紹介と自動返信、予約フォームを実装する方法  ](https://irodoru-web.com/homepage/form#index__YZ3vX92)**
>
> STUDIOでは、ウェブサイトの見た目の部分だけではなく、フォームなどの機能もノーコードで簡単に制作することができます。この記事では、まず基本的なSTUDIOのフォーム機能をご紹介します。STUDIO... 

---

<div class="post-metadata">

**Author:** ![ma1998](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/ma1998/32/3852_2.png) [@ma1998](https://www.nocode-faq.com/u/ma1998)\
**Post date:** [2023 年 12 月 11 日午後 11:07 UTC](https://www.nocode-faq.com/t/topic/4064/3 "2023-12-11T23:07:03Z")

</div>

ご回答ありがとうございます！

自己解決できたので以下に記入します。

❶以下のコードにURLを貼る

❷sandboxにsandbox="allow-same-origin allow-scripts"を指定  
❸BubbleのSettingタブ→General→ドロップダウンをAllow when same originにする

上記の方法でワードプレスとSTUDIO内に表示・フォーム送信できることを確認しました。

ご回答いただいた皆様ありがとうございました。

---

<div class="post-metadata">

**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\
**Post date:** [2023 年 12 月 12 日午前 4:28 UTC](https://www.nocode-faq.com/t/topic/4064/4 "2023-12-12T04:28:05Z")

</div>

できたんですね！  
お疲れ様でした🙌