Wire in a custom action

Your team does not want to only look at the data. When a host spots a listing with a maintenance issue dragging down occupancy, they want to escalate it into the internal ticketing tool without leaving the portal. That is a custom action.

Modify the renderLiveboard function to include the custom action:

function renderLiveboard() {
    const liveboardEmbed = new LiveboardEmbed(container, {
        frameParams: { width: '100%', height: '100%' },
        liveboardId: '<your-liveboard-guid>',
        customActions: [
            {
                name: 'Open listing',
                id: 'open-listing',
                target: CustomActionTarget.VIZ,
                position: CustomActionPosition.PRIMARY,
            },
        ],
    });

    liveboardEmbed.on(EmbedEvent.LiveboardRendered, () => console.log('Liveboard rendered'));

    liveboardEmbed.on(EmbedEvent.CustomAction, (payload) => {
        if (payload.data.id === 'open-listing') {
            handleCustomAction(payload.data);
        }
    });

    liveboardEmbed.render();
}

function handleCustomAction(data) {
    const panel = document.getElementById('detail-panel');
    panel.classList.remove('hidden');
    panel.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    // In production: POST this payload to your ticketing API
}

CustomActionTarget determines where the button appears — VIZ, LIVEBOARD, SPOTTER, or ANSWER. CustomActionPosition determines whether it appears in the primary toolbar or the overflow menu.

Note	If you only want this action visible on the bookings Liveboard and not every Liveboard in the instance, use `metadataIds`, `groupId`, and `orgId` to scope it further.

← Previous Next →