Simple API to set up a connection with Crowded and load a community inside an iframe.
- A Crowded Community domain that is set-up to accept cros origin iframe requests
new Crowded({
domain: "https://yourcommmunity.com" // hostname of the community
});let config = {
debug: true // enable logging
};
// create or select iframe element you want to use
const frame = document.createElement("iframe");
// Create a reference to the embed and load with (optional) config
const embed = new Crowded.Embed(frame, config);You can navigate the iframe to a page in the community by passing a relative path.
embed.to("posts/some-post");You can update the configuration by passing a config.
embed.config({
debug: true, // show helpfull log messages
footerSpacing: 500 // amount of pixels to add to end of the page
});The following watcher are available
Watch all transitions inside the iframe, to i.e. update your router or history state.
Callback format:
{
name: 'user' // name of the state, i.e. page, home
location: { // js location object
pathname: '/users/john',
host: 'https://yourcommunity.com',
href: 'https://yourcommunity.com/users/john'
//etc
},
fromParent: false // will be marked true if this transition
// was done programmatically using embed.to()
}Example:
embed.on("transition", state => {
if (!state.fromParent) {
history.push(state.location.pathname);
}
});Called anytime the users scrolls, the window resizes or a transition occured.
Callback format:
{
top: 0, // offset from top
bottom: 1700, // offset from bottom
y: 0 // scroll position
}Example:
embed.on('scroll', pos => {
if(pos.bottom < 200){
showFooter()
}
}Watch any debug messages
Example:
embed.on("debug", message => console.log(message));