We have an easy system to embed content on any webpage that will fit in. It even supports dark mode automatically.
- Loading a users feed “HTML embed”
- Clean format feeds
- Embed example
- Current embed urls
- User profile header
- User feed
- User feed (pinned conversations only)
- Café feed
- Café feed (pinned conversations only)
- Conversation
- Conversation (full with all comments)
Loading a users feed “HTML embed”
<iframe frameborder="0" style="width:100%;max-width:680px;margin:0px auto;overflow:hidden;background:transparent;display:block;opacity: 0;" onload="this.style.opacity = 1;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts" src="https://hey.cafe/embed/profile_feed/stifflered" id="heycafe_profile_feed"></iframe>
<script>{ let hey_framename="heycafe_profile_feed"; let hey_iframe = document.querySelector("#" + hey_framename); window.addEventListener('message', function(e){ if (e.source == hey_iframe.contentWindow){ if (e.origin.includes("hey.cafe")){ let hey_message = e.data; hey_iframe.style.height = hey_message.height + 'px'; hey_offset=document.documentElement.scrollTop-hey_iframe.offsetTop; if (hey_offset<=0){ hey_offset=0; } let hey_response = { type: "embed_position", value: hey_offset }; e.source.postMessage(hey_response, e.origin); }}} , false); }</script>
As you can see the format is really simple the URLS in the iframe is what matters, you can embed different types of content by changing this value.
If you have more than one embed on a page give each iframe a unique ID. If you use the website embed maker inside hey.cafe it will do this for you.
If you change the iframe ID make sure you update it inside the script by updating
let hey_framename="heycafe_profile_feed";
.Clean format feeds
On feeds like profile_feed
and cafe_feed
you can add clean
to the end of the URL to remove header and comment data from the feed. This is a clean style thats useful for sites to show recent updates for example: https://hey.cafe/embed/cafe_feed/hey/clean.
Embed example
<iframe frameborder="0" style="width:100%;max-width:680px;margin:0px auto;overflow:hidden;background:transparent;display:block;opacity: 0;" onload="this.style.opacity = 1;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts" src="https://hey.cafe/embed/cafe_feed/hey/clean" id="heycafe_clean_feed"></iframe>
<script>{ let hey_framename="heycafe_clean_feed"; let hey_iframe = document.querySelector("#" + hey_framename); window.addEventListener('message', function(e){ if (e.source == hey_iframe.contentWindow){ if (e.origin.includes("hey.cafe")){ let hey_message = e.data; hey_iframe.style.height = hey_message.height + 'px'; hey_offset=document.documentElement.scrollTop-hey_iframe.offsetTop; if (hey_offset<=0){ hey_offset=0; } let hey_response = { type: "embed_position", value: hey_offset }; e.source.postMessage(hey_response, e.origin); }}} , false); }</script>
Current embed urls
Here are the current types and url formats for the embed.
User profile header
https://hey.cafe/embed/profile/stifflered
User feed
https://hey.cafe/embed/profile_feed/stifflered
User feed (pinned conversations only)
https://hey.cafe/embed/profile_feed_pinned/stifflered
Café feed
https://hey.cafe/embed/cafe_feed/minehaus
Café feed (pinned conversations only)
https://hey.cafe/embed/cafe_feed_pinned/minehaus
Conversation
https://hey.cafe/embed/conversation/u154nlnbnn7g9y0sio3ks3zob
Conversation (full with all comments)
https://hey.cafe/embed/conversation_full/u154nlnbnn7g9y0sio3ks3zob