How to programmatically set Memberstack comment channels in Webflow using JavaScript? Answered

Post author
Roy Johairi Lucman

Hi Everyone! I have queries regarding webflow + memberstack integration, hope anyone here can guide me 😄

I am currently implementing a commenting functionality in my webflow application, this was easily done by utilizing memberstack, and using custom attributes like data-ms-channel to setup the channel, I wanted to ask if it is possible to set the channel programmatically like using a custom code, to set the data-ms-channel, I tried manipulating it using javascript like this but it doesn't work as expected. Any form of guidance is greatly appreciated

$("#comment-channel").attr("data-ms-channel", "user comments");

Comments

5 comments

  • Comment author
    A J

    Hey Roy Johairi Lucman, I just tested this out in a personal dummy site.

    So I took the similar approach where I have set an ID for the comment-channel div which has the data-ms-channel attribute. I have kept the data-ms-channel value to be empty as we can set it via custom code. (highlighted in the screenshot as well)

    And I have placed this code in the before </body> section of the page the comments component is in:

    <script> const customChannel = document.getElementById('custom-comment-channel'); customChannel.setAttribute('data-ms-channel', 'aj-custom'); </script>
    So, in your case 'custom-comment-channel' will be replaced by 'comment-channel' and you can set the channel name to be anything instead of 'aj-custom'.
     
    I have tested this out in the site and it works and it creates a channel in the memberstack dashboard as well.
     
    You can give this a try and let me know if it solves your use-case as well
    0
  • Comment author
    Roy lucman

    Thanks A J it works!

    Is it also possible to dynamically set the data-ms-channel in a dynamic list generated by a CMS items? I plan to make a tabular list with unique data and in each row have a "Review" button which will open a new channel 🤔

    The Review button will open a modal, which will contain a comment or feedback section, which would ideally be connected to a unique channel in memberstack for each new record. Would placing the modal inside the CMS list block and utilizing the item fields as dynamic values for 'data-ms-channel' work or is there a more efficient way to do this 🤔

    0
  • Comment author
    A J

    Hey Roy Johairi Lucman, by keeping the comment component inside a CMS list or CMS page, you can directly link the CMS field in the custom attribute section without the use of custom code and would be easier to implement than the modal approach.

    In the earlier approach that you stated, I believe it will be slightly complex than this, as in we would have to use event handlers to listen to buttons and identify the buttons separately via some unique class / ID and then attempt at setting the attribute, if all the buttons open the same modal. I personally haven't tested the latter approach, but I am sure the CMS list / page and linking the channel value directly via the editor works fine.

    0
  • Comment author
    Roy Johairi Lucman

    Hey A J, thanks for the suggestion! I implemented the first approach you mentioned and it works, and it is easier to implement without having unnecessary complexity. 😁

    0
  • Comment author
    A J

    Yes exactly. Welcome 😇

    0

Please sign in to leave a comment.