Get custom field data in Code Embed (Webflow)

Post author
Lukas Bischof

I am trying to create a URL in Webflow, combining a URL from my Webflow CMS with a custom field value from Memberstack. I try doing this using a Code Embed element in Webflow. How can I get a custom field value from Memberstack into my Code Embed element in Webflow?

Here is the code:

<div id="urlContainer"></div>

<script>
  // Define base URL and parameters
  const baseURL = "WEBFLOW_CMS_URL";
  const params = {
    param1: "MEMBERSTACK_DATA", //<-- this is where the Memberstack data should go
    param2: "value2"
  };

  // Generate URL with parameters
  const url = new URL(baseURL);
  Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));

  // Insert the URL into the container
  document.getElementById("urlContainer").innerHTML = `<a href="${url.href}" target="_blank">${url.href}</a>`;
</script>

Comments

1 comment

  • Comment author
    Josh Lopez
    • Edited

    Hey Lukas Bischof

    Thank you for posting. To get a custom field value from Memberstack into your Code Embed element in Webflow, you'll need to use the Memberstack DOM Package which is included in the Memberstack script to retrieve the data. Here's how you can modify your code to achieve this:

    Here's an example of how you can do this:

    <div id="urlContainer"></div>

    <script>
      // Define base URL
      const baseURL = "WEBFLOW_CMS_URL";

      // Fetch Memberstack data
      window.$memberstackDom.onReady.then(function(member) {
        if (member.loggedIn) {
          // Replace 'customFieldName' with the actual name of your custom field
          const customFieldValue = member['customFieldName']; 

          // Define parameters
          const params = {
            param1: customFieldValue, // Use the Memberstack data here
            param2: "value2"
          };

          // Generate URL with parameters
          const url = new URL(baseURL);
          Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));

          // Insert the URL into the container
          document.getElementById("urlContainer").innerHTML = `<a href="${url.href}" target="_blank">${url.href}</a>`;
        } else {
          document.getElementById("urlContainer").innerHTML = "User is not logged in.";
        }
      });
    </script>

    Key Changes:

    • MemberStack.onReady: This ensures that the Memberstack API is ready before you try to access any member data.
    • Check if the user is logged in: This prevents errors if the user is not logged in.
    • Accessing custom field: Replace `'customFieldName'` with the actual name of your custom field in Memberstack.

    Important Notes:

    • Make sure to replace `WEBFLOW_CMS_URL` with the actual URL from your Webflow CMS.
    • Ensure that the custom field you are trying to access is correctly set up in Memberstack and that the user is logged in to retrieve the data.
    0

Please sign in to leave a comment.