Technical information on branding

There are two ways to incorporate your Berkeley Studio model into your own online environment. First, you can embed it with an iFrame in your own website. Secondly, you can use a link to a standalone page. Both are discussed shortly below.

Embedding a Berkeley Publisher web application in your website

You may want to embed a Berkeley Publisher web application in your own corporate website through means of a iFrame. This is a good and safe solution: the code in the iFrame has no access to the parent page and vice versa. It also means all the navigational elements of your corporate website remain available ‘around’ the iFramed content.

This option is mainly chosen where there are not that many extra features in use (chapters, jumplists, previews etc.) on the Berkeley side, or where it is imperative to keep exactly the same surrounding content as on other areas of the company website.

Instructions, HTML code examples and JavaScript resize scripts for iFraming a Berkeley Publisher application are publicly available at GitLab.

It is possible to use iFrames and still have an accessible website (and web accessibility guidelines have acknowledged this too). As long as there is a anchor tag (<a>) inside linking to a standalone version (which can be either the same URL or one pointing to a less ‘naked’ version, e.g. with a logo and company name), people can access your content.

Responsiveness inside an iFrame

The web team produces responsive layouts, so — as with mobile screens — it should not matter how much width a parent page supplies to the iFrame. But varying height is always a problem. For this we have solution where the iFrame communicates the required height to its parent via a postMessage. Instructions and scripts to handle this message can be found at the iframing-bb repository at GitLab.

Linking to a model

Alternatively, you may want your users to access your Berkeley content in a standalone window or tab with a full page layout. This option is mainly chosen by those companies who want to provide a more full-featured interface, containing a login screen, model and session overview, password reset functionality, a document preview pane et cetera.

Design-wise, this will almost always mean a special purpose version of your corporate website look and feel. On one hand, it will contain more ‘Berkeley features’, but on aspects such as menus, it will be probably be more trimmed down than your standard company website: while it is possible to re-implement your corporate menu structure and layout, this kind of duplication is generally to be avoided.