Skip to main content

​
Widget Embed

The widget embed adds a floating button to your app that opens a slide-out panel with your announcements. [TODO: ADD GIF - WIDGET BUTTON CLICK -> PANEL OPENS -> SCROLLING THROUGH ANNOUNCEMENTS]

​
Installation

​
1. Create a widget embed

  1. Go to Settings → Developer → Embeds
  2. Click New Embed
  3. Select Widget as the type
  4. Configure your settings (see below)
  5. Click Create

​
2. Copy the script

Copy the generated script tag: 
<script 
  src="https://cdn.updates.page/widget.js" 
  data-embed-id="your-embed-id"
  async
></script>

​
3. Add to your site

Paste the script tag before the closing </body> tag on every page where you want the widget to appear. 
<!DOCTYPE html>
<html>
  <head>...</head>
  <body>
    <!-- Your app content -->
    
    <!-- updates.page widget -->
    <script 
      src="https://cdn.updates.page/widget.js" 
      data-embed-id="your-embed-id"
      async
    ></script>
  </body>
</html>

​
Configuration options

OptionDescriptionDefault
PositionBottom-left or bottom-rightBottom-right
ThemeLight or darkLight
Show badgeDisplay “new” indicatorYes
Badge colorColor of the notification badgeRed
CategoriesWhich categories to includeAll
[TODO: ADD IMAGE - WIDGET CONFIGURATION PANEL]

​
Customizing the trigger button

​
Default button

By default, the widget shows a floating button with a bell icon.

​
Custom trigger

To use your own button, add data-updates-trigger to any element: 
<button data-updates-trigger>What's New</button>

<script 
  src="https://cdn.updates.page/widget.js" 
  data-embed-id="your-embed-id"
  data-hide-button="true"
  async
></script>
The data-hide-button="true" attribute hides the default floating button.

​
”New” badge

The widget shows a red badge when there are announcements the user hasn’t seen. [TODO: ADD IMAGE - WIDGET BUTTON WITH RED BADGE]

​
How it works

  • Badge appears when new announcements are published
  • Disappears when the user opens the widget
  • Uses localStorage to track what’s been seen

​
Disabling the badge

Add data-hide-badge="true" to the script tag: 
<script 
  src="https://cdn.updates.page/widget.js" 
  data-embed-id="your-embed-id"
  data-hide-badge="true"
  async
></script>

​
JavaScript API

Control the widget programmatically: 
// Open the widget
window.UpdatesPage.open()

// Close the widget
window.UpdatesPage.close()

// Toggle the widget
window.UpdatesPage.toggle()

// Check if widget is open
window.UpdatesPage.isOpen()

// Get unread count
window.UpdatesPage.getUnreadCount()

​
Example: Open on custom event

document.querySelector('#whats-new-link').addEventListener('click', () => {
  window.UpdatesPage.open()
})

​
Framework guides

import { useEffect } from 'react'

function App() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://cdn.updates.page/widget.js'
    script.dataset.embedId = 'your-embed-id'
    script.async = true
    document.body.appendChild(script)
    
    return () => document.body.removeChild(script)
  }, [])
  
  return <div>...</div>
}
Use the Script component:
import Script from 'next/script'

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script 
        src="https://cdn.updates.page/widget.js"
        data-embed-id="your-embed-id"
        strategy="lazyOnload"
      />
    </>
  )
}

<template>
  <div>...</div>
</template>

<script>
export default {
  mounted() {
    const script = document.createElement('script')
    script.src = 'https://cdn.updates.page/widget.js'
    script.dataset.embedId = 'your-embed-id'
    script.async = true
    document.body.appendChild(script)
  }
}
</script>