Novu•10mo ago

Not able to handle primaray/secondary actions through cdn embed.

I am only able to run this piece of code with iframe. I want to use this with the cdn embed. Please help me how can I do that, not able to find on docs novu.on("action_click", ({ templateIdentifier, type, notification }) => { console.log({ templateIdentifier, type, notification }); window.alert("Yes! this worked!") });

8 Replies

Ask Inkeep•10mo ago

Hi @ManwinderSingh, I'm an AI assistant for Novu. While a team member reviews this question, I'll look through relevant sources and see if I can provide suggestions. Please tag @Ask Inkeep with any follow-up questions. ----------------------------- While I generate an answer, here are some sources that might be helpful: * Iframe Embed * React * Web Component * Angular Component -----------------------------

Ask Inkeep•10mo ago

Answer To use the novu.on("action_click", ...) functionality with the CDN embed rather than the iFrame embed, you can follow the instructions provided for the Web Component integration. The Web Component allows you to listen to user interactions, including action clicks, similarly to what you've described. First, ensure you've included the Novu Notification Center Web Component by adding its script tag to your HTML:

<script src="https://web-component.novu.co/index.js"></script>

<script src="https://web-component.novu.co/index.js"></script>

(1) Then, instantiate the Novu Notification Center component in your application, setting up the onActionClick callback to handle action clicks:

<notification-center-component
  application-identifier="YOUR_APPLICATION_IDENTIFIER"
  subscriber-id="YOUR_SUBSCRIBER_ID"
  on-action-click="handleActionClick"
></notification-center-component>

<script>
  function handleActionClick({ detail: { templateIdentifier, type, notification } }) {
    console.log({ templateIdentifier, type, notification });
    window.alert("Yes! this worked!");
  }
</script>

<notification-center-component
  application-identifier="YOUR_APPLICATION_IDENTIFIER"
  subscriber-id="YOUR_SUBSCRIBER_ID"
  on-action-click="handleActionClick"
></notification-center-component>

<script>
  function handleActionClick({ detail: { templateIdentifier, type, notification } }) {
    console.log({ templateIdentifier, type, notification });
    window.alert("Yes! this worked!");
  }
</script>

Make sure to replace "YOUR_APPLICATION_IDENTIFIER" and "YOUR_SUBSCRIBER_ID" with your actual application identifier and subscriber ID. The event names are in kebab-case (e.g., on-action-click) when used as attributes in the HTML tag for the component. This setup allows you to capture and handle action clicks on notifications when using the Novu Notification Center as a Web Component, leveraging its CDN embed.

Sources [1] Web Component