Difference between revisions of "Using CLIO on a Blog"
| (3 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
{{DocumentationPage}} | |||
== Overview == | == Overview == | ||
When you host CLIO on a publicly accessible web server, it can be embedded directly into websites and blogging platforms, such as Wordpress. | 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 == | == 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. | 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 == | == Embedding CLIO Activities using an Inline Frame == | ||
| Line 10: | Line 13: | ||
=== <nowiki><iframe> Element</nowiki> === | === <nowiki><iframe> Element</nowiki> === | ||
This is a | 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> | <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}} | |||
Latest revision as of 21:36, 2 November 2022
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.
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.
<iframe> Element
This is a basic iframe element you can use to embed a CLIO Exhibit or Activity into your website:
<iframe sandbox="allow-same-origin allow-scripts" src="https://cliomuseums.org/clio/exhibit/"></iframe>
All you need to do is change the src 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 iframe code into your page using the "Custom HTML" Block. There is also a WordPress iframe plugin that enables an iframe short code.
| Documentation | |
|---|---|
| Installation | Look and Feel |
| Interaction Modes | Developing Activity Types |
| Creating an Interactive | Framework |
| Integrating CLIO | Contribute |
