NoLog.cz/gancio
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity

update docs to embed event[s]

Browse source
This commit is contained in:
lesion 2022-01-26 09:54:25 +01:00
parent d1d39e30ec
commit a90fbcdac7
No known key found for this signature in database
GPG key ID: 352918250B012177
1 changed files with 24 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
docs/embed.md
View file

@ -6,12 +6,17 @@ nav_order: 1
parent: Usage
---
## Embed event[s] in your webpage
## Embed a single event or a list of events in your webpage
{: .no_toc }
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.
1. TOC
{:toc}
## Webcomponents
Webcomponents usage requires a small (~5kB gzipped) js script to be loaded in your page (note that you should use your instance name):
[Webcomponents](https://www.webcomponents.org/introduction) 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>
```
@ -32,11 +37,26 @@ You can also embed a list of events using `<gancio-events>` custom element, you
```html
<gancio-events baseurl='https://demo.gancio.org'></gancio-events>
<gancio-events baseurl='https://demo.gancio.org'>
<a href='https://demo.gancio.org'>Gancio Events</a>
</gancio-events>
```
<gancio-events baseurl='https://demo.gancio.org'></gancio-events>
<gancio-events baseurl='https://demo.gancio.org'><a href='https://demo.gancio.org'>Gancio Events</a></gancio-events>
> 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)
## IFrame
You can also use the old iframe method
<iframe src='https://demo.gancio.org/embed/17' style="width: 410px; border: none; height: 210px; overflow: hidden;"></iframe>
```html
<iframe src='https://demo.gancio.org/embed/17' style="width: 410px; border: none; height: 210px; overflow: hidden;"></iframe>
```
## Wordpress
To embed an event or a list of events into a [WordPress](https://wordpress.com) website you can use the [WPGancio](https://wordpress.org/plugins/wpgancio/) plugin, this allows you to use webcomponents and shortcodes and automatically includes the needed script in each page and post.