🦄Creating an iframe

An inline frame (iframe) is a way to load a Hylo view into your existing webpage

This guide provides instructions on integrating Hylo's dynamic content directly into your web page using iframes. By following the examples and customization options outlined below, you can seamlessly embed Hylo group views tailored to your needs.

Getting Started

To begin, replace "GROUP_NAME" in the examples with the actual name of your Hylo group. If your group name contains spaces, use dashes instead (e.g., "Group name" becomes "Group-name").

Basic Usage

Adjust the styling based on your preferences to seamlessly integrate the iframe into your webpage. The provided styling ensures the iframe fills the entire page. Feel free to customize the width, height, and other attributes to suit your design.

htmlCopy code<iframe src="https://hylo.com/groups/GROUP_NAME/explore?redirectToView=explore” style="width:100%; height:100%; margin:0; padding:0; border:none;"></iframe>

Customizing Views

You can customize which Hylo view to display on load by modifying the src URL and/or the redirectToView parameter. Below are examples demonstrating different scenarios:

1. Display the Group's explore page:

htmlCopy code<iframe src="https://hylo.com/groups/GROUP_NAME/explore?redirectToView=explore” style="width:100%; height:100%; margin:0; padding:0; border:none;"></iframe>

1. Load the home/stream view for logged-in users, redirecting to the explore view for the first-time login:

htmlCopy code<iframe src="https://hylo.com/groups/GROUP_NAME?redirectToView=explore” style="width:100%; height:calc(100vh - 50px); margin:0; padding:0; border:none;" ></iframe>

1. Always go to the map view on page load for the first login or if users are already logged in:

htmlCopy code<iframe src="https://hylo.com/groups/GROUP_NAME/map?redirectToView=map” style="width:100%; height:calc(100vh - 50px); margin:0; padding:0; border:none;" ></iframe>

Public Groups

• To display the public Map https://hylo.com/public/map

• To display the public Map for a specific group: https://hylo.com/public/map?group=GROUP_SLUG (e.g. group=terran-collective)

• If a group is public and the iframe points to https://hylo.com/group/GROUP_NAME then for not logged in users it will display group info and let people join or request to join the group depending on the settings of the group.