View source for Using CLIO on a Blog

{{DocumentationPage}}

== Overview ==
When you host CLIO on a publicly accessible web server, it can be embedded directly into websites and blogging platforms, such as Wordpress.

== Understanding CLIO URL Parameters ==
The CLIO web application uses a URL query-based system to load the interface dynamically based on what parameters is based to it through the URL.  This can be thought of similarly to the way options are passed into a programming function.  When the CLIO web application directory is navigated to without any parameters, it will default to the full “Facilitator Mode” experience.

{{See|Understanding the CLIO URL Scheme}}

== Embedding CLIO Activities using an Inline Frame ==
An Inline Frame, also known as an iframe, is an HTML5 element that can be used to embed one website within another website.  These elements require some inline parameters to work properly.  Your web server may also require some minor configuration depending on the hosting environment.

=== <nowiki><iframe> Element</nowiki> ===
This is a basic iframe element you can use to embed a CLIO Exhibit or Activity into your website:

<code><nowiki><iframe sandbox="allow-same-origin allow-scripts" src="https://cliomuseums.org/clio/exhibit/"></iframe></nowiki></code>

All you need to do is change the <code>src</code> parameter to reflect the URL of your Activity or Exhibit.

=== Cross-Origin Resource Sharing (CORS) ===
Cross-Origin Resource Sharing is an HTTP web server mechanism that controls which web servers can load certain resources within your website.  It is a security measure to prevent malicious scripts from embedding themselves within otherwise non-malicious websites.  If your Wordpress or similar blogging platform is hosted on a different web server than your CLIO installation, you may need to enable CORS requests between these web servers.  The simplest remedy to CORS problems is to host them through the same web server using the same protocol.

== Adding CLIO Activities to Wordpress ==
Embed an <code>iframe</code> code into your page using the "Custom HTML" Block.  There is also a [https://wordpress.org/plugins/iframe/ WordPress iframe plugin] that enables an iframe short code.

{{DocumentationNavigation}}