NotionNext Facebook Customer Chat Bubble | Andy's Pro Blog

[giscus[bot]]

https://tw.andys.pro/article/notionnext-facebook-customer-chat-bubble

當我們打開 Facebook 的時候，我們最喜歡打開右下角的聊天氣泡，開始跟朋友聊天！

🪴 開發點子萌芽

😥 一個人寫 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](http://localhost/) 開發，要使用 ngrok 並在 [developer.facebook.com](http://developer.facebook.com/) 內將域名加入，Facebook 才會打開 API ，讓聊天視窗可以啟用！

📡 Future work

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

☝️ 我修好了 tangly1024#154

🤔 結論

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

看看我的 GitHub PR 😃

https://tw.andys.pro/article/notionnext-facebook-customer-chat-bubble