NotionNext Facebook Customer Chat Bubble

English Title

简体标题

type

Post

status

Published

date

Apr 5, 2022

slug

notionnext-facebook-customer-chat-bubble

summary

當我們打開 Facebook 的時候，我們最喜歡打開右下角的聊天氣泡，開始跟朋友聊天！ 🪴 開發點子萌芽 <aside> 😥 一個人寫 Blog 很孤單，一個人看 Blog 很乏味！ </aside>如果可以在 Blog 跟作者聊天，會不會很讚？ 📣 Introducing Facebook Customer Chat for NotionNext! 我找了好多個 Facebook Customer Chat 插件，一直放在 __document.js Next.js 便不會跑起來。終於在 __app.js 內，插件終於跑起來了！ 🔨 功用 Facebook Messenger 懸浮氣泡聊天的功能 這個插件使得 NotionNext 有 Facebook 懸浮氣泡聊天的功能，讓使用者更方便的跟粉絲專頁的作者溝通！ 📝 使用須知 使用此插件必須要更改 next.config.js 的 CORS 設定這個插件應該在伺服器端必須關閉，但是經過我的測試，若使用 Next.js 的 dynamic import 或是 && 來檢查參數，插件便不會執行。 📡 Future work 大家可以看一下怎麼讓 dynamic import 和 env code 檢查可以跑起來，感謝！ 🤔 結論 歡迎大家到 tw.andys.pro 跟我用 Facebook Messenger Chat 聊天！看看我的 GitHub PR 😃

🪴 開發點子萌芽

😥

一個人寫 Blog 很孤單，一個人看 Blog 很乏味！

💡 如果可以在 Blog 跟作者聊天，會不會很讚？

📣 Introducing Facebook Customer Chat for NotionNext!

我找了好多個 Facebook Customer Chat 插件，一直放在 __document.js Next.js 便不會跑起來。

終於在 __app.js 內，插件終於跑起來了！

🔨 功用

💬 Facebook Messenger 懸浮氣泡聊天的功能

這個插件使得 NotionNext 有 Facebook 懸浮氣泡聊天的功能，讓使用者更方便的跟粉絲專頁的作者溝通！

📝 使用須知

使用此插件必須要更改 next.config.js 的 CORS 設定這個插件應該在伺服器端必須關閉，但是經過我的測試，若使用 Next.js 的 dynamic import 或是 && 來檢查參數，插件便不會執行。

🧪

重現這個插件不能用 localhost 開發，要使用 ngrok 並在 developer.facebook.com 內將域名加入，Facebook 才會打開 API ，讓聊天視窗可以啟用！

📡 Future work

~~大家可以看一下怎麼讓 dynamic import 和 env code 檢查可以跑起來，感謝！~~

☝️ 我修好了 https://github.com/tangly1024/NotionNext/pull/154

🤔 結論

歡迎大家到 tw.andys.pro 跟我用 Facebook Messenger Chat 聊天！

看看我的 GitHub PR 😃

Reference

https://github.com/Yoctol/react-messenger-customer-chat

https://stackoverflow.com/questions/68463559/how-to-add-facebook-chat-messenger-to-next-js