{"id":6638,"date":"2019-08-02T16:07:48","date_gmt":"2019-08-02T15:07:48","guid":{"rendered":"https:\/\/www.prodpad.com\/?p=6638"},"modified":"2025-01-13T16:27:08","modified_gmt":"2025-01-13T16:27:08","slug":"customising-your-cfp-widget","status":"publish","type":"post","link":"https:\/\/www.prodpad.com\/blog\/customising-your-cfp-widget\/","title":{"rendered":"Customizing your CFP Widget (Blog 2 of 2, finally!)"},"content":{"rendered":"\n



In the first tutorial<\/a> I talked about going beyond the basic styling for ProdPad’s Customer Feedback Widget to customizing your widget visually and making it your own.

In this tutorial, I\u2019m going to explain how to:<\/p>\n\n\n\n

    \n
  1. Set up a custom trigger for your widget <\/li>\n\n\n\n
  2. Creating a help menu that triggers the popup feedback form (which we used to have in our app)<\/li>\n<\/ol>\n\n\n\n

    For this tutorial, all you\u2019ll need is\u2026<\/strong><\/p>\n\n\n\n

      \n
    1. Your widget embed code<\/li>\n\n\n\n
    2. Access to your own codebase<\/li>\n\n\n\n
    3. A text editor (I use Visual Studio Editor) <\/li>\n\n\n\n
    4. A basic understanding of HTML JS and CSS<\/li>\n\n\n\n
    5. Another good cup of coffee!<\/li>\n<\/ol>\n\n\n\n

      Setting up a custom trigger<\/h2>\n\n\n\n

      Ok, so you have your widget, but you want to trigger the popup feedback form from another element on your page; this might be a different button or a text link like this:<\/p>\n\n\n\n

      \"Customer<\/figure>\n\n\n\n

      First of all, we want to create a listener in JS for any element clicks. I\u2019m going to use a specific class (so that it\u2019s reusable in multiple places across the page) and mimic the functionality of clicking on our existing widget button. But, you could use an ID if you only wanted to trigger it from a single point on your page.\u00a0

      I\u2019m going to use a class with the name trigger Widget. You can use whatever name you like, just make sure you update the relevant references in the script and HTML.\u00a0

      Note<\/strong>: I\u2019m using a class rather than an ID in case you want to trigger the widget from multiple places.<\/p>\n\n\n\n

      With pure JavaScript:<\/strong><\/h4>\n\n\n\n