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.

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.

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.