Embedding Facebook Messenger

1

Hi everyone. My first post here, this forum seems great.

Thanks for the guide. My client would like to have a Facebook Messenger iframe window pop up when a trigger is clicked. I can not however figure out how to get it working. I tried doing it via the ‘How to embed a messenger tool on your website’ method but I must be doing something wrong.

Could you please share a guide or a HTML label content example here on how to get it working?

My project is a trade fair of 50 exhibitors. If all goes well I will be needing 50 of these Messenger tabs available in my model :slight_smile:

2

@ville, I’ve moved your post to a dedicated topic.

Are you interested in embedding what Facebook calls “Customer Chat Plugin”?

If so, have you whitelisted the domain you’re serving your scenes from? And are you testing it after uploading to the internet, accessing the scene with HTTPS protocol?

3

@wojtek Thanks. Yup, that pretty much must be what I’m looking for.

The model is still on the regular domain but I have whitelisted that. I did also upload it and test it there but the furthest I got was an iframe window stating “Display forbidden by X-Frame Options”.

I actually worked around this quite OK by just adding a “Open URL” pointer that directs the user straight to the Messenger window of the company in question. This opens as a new tab, which is OK but it would be really nice to get it as an iframe window instead, thus not directing the customer out of the fair.

I’m a noob all coding considered so a few screenshots of the actual process of installing this would go a long way haha.

4

To integrate a single FB’s Customer Chat Plugin please follow the “Option 1: Using the Setup Tool” section of the Plugin docs: https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/:

  • When asked for the domain to whitelist enter https://<YOUR-USERNAME>.shapespark.com.
  • At the last step choose “I’ll install the code by myself” and place the code snippet in the body-end.html file inside the Shapespark scene directory (under Documents\Shapespark).
  • Upload the scene to our hosting and open it from there.

Integration of multiple chats inside one website is tricky, because it’s not the typical use case of the Chat Plugin. One idea you can try is to create a set of very simple HTML websites containing just a single Chat Plugin, one website for one exhibitor. Then, instead of embedding the Chat Plugin in the Shapespark scene directly, you could embed these simple websites as <iframe>s in HTML Labels, exactly as shown in INTERACTIVE Walkthrough on the WEB | Shapespark for Sketchup - YouTube

2 Likes
5

Thanks, this clarified the issue a lot. I went with the “open URL” -option this time but will use definitely use this method in the future.

1 Like