Extending Pugpig Bolt
Learn how to expand the functionality of Pugpig Bolt by exploring different methods of extension and customization to enhance your digital publishing platform.
Table of Contents
Pugpig Bolt is a robust framework that is used by hundreds of wonderful apps. It has evolved based on best practices and learnings over many years, and some elements of the experience are core to the product and are common to all of our apps.
That said, it's also been designed to be highly-customisable and extensible to ensure that elements, features and designs unique to your brands can be showcased. This article summarises the various options you have to extend the app yourself (or using other third parties).
We are always happy to collaborate with any third parties, agencies or in-house development teams that wish to create (and host) the items listed below.
Offline Behaviour
Any content served from external domains will NOT work offline, so we need to ensure the messaging is graceful in these cases.
Embedding Single Page Web Apps
Bolt has the ability to embed an entire Single Page Web App as a tab. This is especially useful to include features that you already have on your web site that aren't directly related to reading content. Examples could be:
- Stock prices
- Sports scores
- A bespoke video hub
- Bespoke archive search
We can allow these pages to have access to the Pugpig Bridge if user information is required, or custom analytics events need to be sent.
The web apps should be self-contained - they shouldn't link to other HTML pages as this will cause the internal embedded browser to be invoked.
An example use case for this is building a custom search interface. For this, see our search in Bolt overview doc, and our outline of the Pugpig Search API.
Using your own search engine
If you prefer to use your own search engine instead of the Pugpig one, you can use this feature in conjuction with Universal Linking to achieve this. Note that you'll need to supply a version of the page that excludes site navigation, headers and footers.
Embeds inside articles
One major advantage of the hybrid nature of Bolt is that you can embed HTML/Javascript elements directly into your articles - placed inline in your content feed. You can read more about the various types of embeds are and how they work in this doc.
iframe cards
iframe cards on the timeline give you the freedom to include content from other sources with very little effort. As per the above, we strongly recommend that the content of these cards is a SPA. It is important not to alter the page history using JavaScript APIs, e.g. pushState
or replaceState
. If you're utilising a popular framework with a routing package, we suggest implementing a memory-based routing strategy. This approach helps maintain the expected next/previous navigation stack on desktop browsers.
iframe height
Note that ideally the height of the iframe can be known in advance to avoid content jumping on the screen as it is loaded in. Here are two snippets of example code to help with this. If you expect the page height to change you can use example two, if you want to fire it once and forget or have more granular control you can use snippet one.
Example one
function sendPageHeight() {
var docHeight = document.documentElement.scrollHeight;
var message = {
"event": "BoltIframeHeight",
"iframe": window.name,
"iframeSrc": window.location.href,
"height": docHeight
};
parent.postMessage(message, '*');
}
Then call the function whenever the page height changes:
sendPageHeight()
Example two
// Create an Observer instance and watch page dimensions
const pageResizeObserver = new ResizeObserver(entries => {
var docHeight = entries[0].target.clientHeight
var message = {
"event": "BoltIframeHeight",
"iframe": window.name,
"iframeSrc": window.location.href,
"height": docHeight
};
parent.postMessage(message, '*');
})
// Start watchin' the body tag when the page is ready.
window.addEventListener('DOMContentLoaded', () => {
pageResizeObserver.observe(document.body)
})
Adding one-off content pages via HTML zips
Via the Pugpig CMS you can upload bundles containing an HTML page and assets. The primary use case for this is inserting custom full-page adverts into your timelines/editions, however it can also be used for creating other types of one-off content, such as interactive articles. There are more details in this doc.
Third-party SDKs
As well as supporting a list of third-party native SDKs that can be configured out of the box in Bolt (for things like analytics, push notifications and adverts), you can request an integration with other SDKs we may not have worked with before. At the moment the Pugpig team must carry out the implementation work for these. The list of available integrations, as well as guidance on the kinds of SDKs we can integrate with, can be found here.