Listening to external link clicked event and preventing navigation in a webview context

If you need to subscribe to the event directly you can use the snippet below. Alternatively you can also use the event listening mechanism provided our by SDK which is documented here.

Example Listener Script

window.addEventListener( 
  "message", 
  (event) => { 
     const dividerIndex = event.data.indexOf("."); 
     const sender = event.data.slice(0, dividerIndex); 
     const payload = event.data.slice(dividerIndex + 1); 

     if (sender === "APPOINTEDD-BOOKING-TOOL") {
       console.log(JSON.parse(payload)); 
     } 
   }, 
   false, 
);

Example Data Payload

{ 
    "data": { 
        "iFrameId": "appointedd-widget-iFrame-669e773f3cf1e5a8131864f9-1", 
        "url": "<https://www.appointedd.com/privacy-policy>" 
    }, 
    "name": "EXTERNAL_LINK_CLICKED" 
}

If you need to stop the widget from opening the link you can pass a webview property to control this.

Embedded

const widget = Appointedd.renderWidget("iFrameContainer", { 
  widgetId: "[YOUR_WIDGET_ID]", 
  webview: true, 
});

Popover

<button 
  id="ap-popbtn-669e773f3cf1e5a8131864f9" 
  class="appointedd-booking-widget-popover" 
  data-widget-id="669e773f3cf1e5a8131864f9" 
  data-webview="true" 
> 
  Book now 
</button>