Push Spinning Wheel data to Zapier via webhook

Ask the Community Customization
1

If this is taking longer to implement, is it possible to have a Java Script template that pushes the data to Zapier’s web hook trigger instead? This could be a quicker, short term solution for this.

Thanks!

2 Likes
Zapier integration
3

Welcome to the Community, @user26066 :waving_hand:

Thank you so much for the feedback!

I’ve discussed this with the devs and it is technically possible. However, please note that since the webhook would be public, there’s a slight risk that some users could send fake requests and results, even without actually using the wheel.

If you’re okay with this limitation, our developers can work on a custom solution for you. Let us know if you’d like to proceed :slightly_smiling_face:

1 Like
4

How is the web hook public.

2 Likes
5

Sorry for being not clear enough!

What I meant is that you can see the requests being sent to the webhook by checking the website through DevTools. However, regular users (without a tech background) won’t see this :slightly_smiling_face:

6

Ya, im not worried about that. How can I set it up?

1 Like
7

Great! Our devs will create a custom solution for you.

I’ve passed your request to them and will update you once it’s done :slightly_smiling_face:

8

Hi there, @Smash_N_Dash_Rage_Ro :waving_hand:

Here is a solution from our devs:

const webhookUrl = "";

const widgetId = "4a70fb23-caff-45e1-99bc-b568274235e3";

const data = {
  email: "",
  promocode: "",
};

const sendToWebhook = (data) => {
  const formData = new FormData();

  for (const key in data) {
    formData.append(key, data[key]);
  }

  fetch(webhookUrl, {
    method: "POST",
    body: formData,
  });
};

const selectPortal = () =>
  document.querySelector(`.es-portal-root[class*='${widgetId}']`);
const selectForm = (portal) => portal.querySelector("[class*='Form']");
const selectPromoCode = (portal) =>
  portal.querySelector("[class*='Coupon__Value']")?.textContent || "";
const selectEmailInput = (form) => form.querySelector("[type='email']");

const observePortal = (portal) => {
  const portalObserver = new MutationObserver(() => {
    const form = selectForm(portal);

    if (form) return;

    const promocode = selectPromoCode(portal);

    if (!promocode || !data.email) return;

    data.promocode = promocode;

    sendToWebhook(data);

    portalObserver.disconnect();
  });

  portalObserver.observe(portal, { childList: true, subtree: true });
};

const handleData = (portal) => {
  const form = selectForm(portal);

  if (!form) return;

  const input = selectEmailInput(form);

  if (input && input.value && input.checkValidity()) {
    data.email = input.value;
  }
};

const watchPortal = () => {
  const documentObserver = new MutationObserver(() => {
    const portal = selectPortal();

    if (!portal) return;

    observePortal(portal);

    documentObserver.disconnect();

    portal.addEventListener("keydown", (event) => {
      if (event.key === "Enter") handleData(portal);
    });

    portal.addEventListener("click", () => {
      handleData(portal);
    });
  });

  documentObserver.observe(document, { childList: true, subtree: true });
};

watchPortal();

Add your webhook in the 1st line of the code and add the resulted code to the Custom JS field on the Settings tab of your widget’s settings:

image
image623×439 23 KB

1 Like