encrypt/gancio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update docs

Browse Source
This commit is contained in:
lesion
2021-12-07 16:34:42 +01:00
parent ad93f83b12
commit 4cf38777c9
9 changed files with 115 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
docs/embed.md
View File

@@ -1,33 +1,42 @@
---
layout: default
title: Embed events
title: Embed events in webpages
permalink: /usage/embed
nav_order: 1
parent: Usage
---
## Embed event
## Embed event[s] in your webpage
You can embed a list of filtered events or a specific event card in your webpage using a classic old-school `iframe` or a shiny new webcomponent.
### Webcomponents
The webcomponent require a small js to be loaded in your page:
```javascript
## Webcomponents
Webcomponents usage requires a small (~5kB gzipped) js script to be loaded in your page (note that you should use your instance name):
```html
<script src='https://demo.gancio.org/gancio-events.es.js'></script>
```
#### embed a single event
> you can copy the code in **event page > Embed > Copy**
### Embed a single event
To embed an event in webpages you use `<gancio-event>` custom element, you can copy the required code in **event's page > Embed > Copy**, should be like the following:
<script src='https://demo.gancio.org/gancio-events.es.js'></script>
<gancio-event id=17 baseurl='https://demo.gancio.org'></gancio-event>
```javascript
```html
<gancio-event id=17 baseurl='https://demo.gancio.org'></gancio-event>
```
#### embed event lists
> you can copy the code in **Export > List > Copy**
<script src='https://demo.gancio.org/gancio-events.es.js'></script>
<gancio-event id=17 baseurl='https://demo.gancio.org'></gancio-event>
### Embed event lists
You can also embed a list of events using `<gancio-events>` custom element, you can copy the required code in **Export > List > Copy**
```html
<gancio-events baseurl='https://demo.gancio.org'></gancio-events>
```
<gancio-events baseurl='https://demo.gancio.org'></gancio-events>
```javascript
<gancio-event baseurl='https://demo.gancio.org'></gancio-event>
```
> info "Customize"
> Note that you can modify the title (or completely remove it using an empty `title` param) and the icon,
> you can limit the list to a maximum number of events using the `maxlength` parameter and filter events by `tags` or `places` using that parameters (it's easier using **gancio** than to explain it here)