Modified 19 November 2019 by Ian Weatherhogg

Overdrive Developers : creating your own Page Builder tiles

Introduction

Now you can create your own widgets that appear in the Page Builder menu ready to be dragged and dropped onto your site pages.

Tile plugins can be defined in JavaScript - in Site Settings > Developers > JS or as files stored in Drive, or hosted on your own infrastructure.

Quickstart

  1. Open this JavaScript (“JS”) file and download it to your computer: overdrive-weather-plugin.js
  2. On your Overdrive site create or choose a page where you’d like scripts to be stored, e.g. /code/js/
  3. From the folder tile on the chosen page + Upload the JS file into the folder.
  4. You should now be able to view the file contents using a path like this:
    /assets/bypath/code/js/overdrive-weather-plugin.js
  5. In Site Settings > Developers > JS paste this code:
    require(["/assets/bypath/code/js/overdrive-weather-plugin.js"])
  6. The JS uses external resources from weatherwidget.io which your site needs to allow, so paste this into the Chrome console (ctrl-shift-i)
    odApp.tools.settings.site.set({CSP_Extras: "weatherwidget.io"})
  7. Now reload the page and look for the Weather tile in Page Builder > Other

Notes

  1. To edit the file you can use a Drive app like JavaScript Editey
  2. If your changes aren’t appearing you can append ?refresh=1 to the URL like so:
    /assets/bypath
    /code/js/overdrive-weather-plugin.js?refresh=1