Custom Code

In addition to the native media components, Canvasflow supports the ability to extend what is possible via the ' Custom Code' component. 
Using the ' Custom Code' component is a great way to enhance articles (or templates) by adding content that are not natively supported by Canvasflow.  This may be simple HTML markup, third party embed scripts or custom zip files containing multiple custom files.

Writing custom markup

In its most simple form, the custom code component can be used to add HTML markup, for example:

<h1>Hello World</h1> <br> <p>My markup is added here</p>

It is also possible to include a style block to apply styling.  

<style> h1 {color:red; font-size:2em;} </style>

<h1>Hello World</h1><br>

Upload a ZIP file

If your project requires more complex custom code, it might be more manageable to create the custom code in an external IDE and create a ZIP file which can then be uploaded directly to your article.

When creating a ZIP file, you must ensure that an index.html file exists in the root of the ZIP and all assets references are relative to the root of the file.  It is possible to reference external assets but these will not be available to an offline app. 

Once the zip file has been created, use the ' select ZIP' button to locate and upload the file.  Canvasflow will then process this file and display it in your article.  When publishing to a supported channel, all included assets will be delivered to the device and will be available offline. 

Full Bleed

Fits the custom code component to the full width of the canvas, overwriting any padding.

Inline Content

By default, custom code added is added to an article via an iframe.  This ensures the code being injected does not conflict with the existing Canvasflow codebase.  In most cases this is the best way to add custom code to your articles, however in some cases - depending on the type of custom code being added - it may be necessary for the code to be injected ' inline' into the page.

Examples of when using inline content is advisable:

  • The script being used does not render correctly in an iframe 
  • The script being used needs to dynamically adjust the height of its container
  • You wish to reference CSS created in Canvasflow

When inline content is enabled, you will be presented with the following warning:

Clicking 'Yes', will inject the code directly into the article.  If you notice any negative effects it is recommended that you do not save the article but simply refresh the browser to revert the change.

Display On Device

The 'Display' On option allows you to choose which devices the custom code component will be displayed on, by default it will be displayed on mobile, tablet and desktop.

Still need help? Contact Us Contact Us