> For the complete documentation index, see [llms.txt](https://hylozoic.gitbook.io/hylo/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hylozoic.gitbook.io/hylo/guides/creating-an-iframe.md).

# Creating an iframe

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.

```html
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:

```html
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>
```

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

```html
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>
```

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

```html
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.&#x20;