User Feedback

To collect user feedback we will use Featurebase. If you followed the Setup section on the User Facing Documentation page of this guide then you should already have an account with Featurebase and subscribed to the "Starter" plan.

We will embed several Featurebase widgets into our web app and desktop/mobile apps.

To embed the changelog widget, start by going to your Featurebase dashboard. From there click the "Feedback" icon on the left sidebar and click on "Install Widget & Embed":

Click on "Install Changelog Widget":

Scroll down to the "Installing" section and select the "HTML" tab. Then click the "Copy" button to copy the HTML code snippet.

You can either use the copied snippet and manually customize it or use the Epic Fantasy Forge equivalent snippet and customize it as necessary:

<!-- Featurebase -->
    <script>
      !(function(e,t){const a="featurebase-sdk";function n(){if(!t.getElementById(a)){var e=t.createElement("script");(e.id=a),(e.src="https://do.featurebase.app/js/sdk.js"),t.getElementsByTagName("script")[0].parentNode.insertBefore(e,t.getElementsByTagName("script")[0])}}"function"!=typeof e.Featurebase&&(e.Featurebase=function(){(e.Featurebase.q=e.Featurebase.q||[]).push(arguments)}),"complete"===t.readyState||"interactive"===t.readyState?n():t.addEventListener("DOMContentLoaded",n)})(window,document);
    </script>
    <script>
      Featurebase("init_changelog_widget", {
        organization: "epicfantasyforge",
        dropdown: {
          enabled: false
        },
        locale: "en",
        popup: {
          autoOpenForNewUpdates: true,
          enabled: true,
          usersName: "Worldbuilder"
        },
        theme: "dark"
      })
    </script>

In the case of Epic Fantasy Forge, the dropdown widget is disabled. We will only use the popup widget. It will automatically open when we publish a new changelog and this particular user has already visited our app before. They are greeted and referred to as "Worldbuilder".

Tests

Before adding the widget into our app, we should first add tests. In this case unit and integration tests are not necessary since there is no logic on the Epic Fantasy Forge side regarding this widget. It is simply present in our app and all the logic is handled on the Featurebase side.

However, to verify the integration with Featurebase works properly we should add a manual test case in Qase. For more information about Qase, see the Testing Tool section on the Testing page of this guide.

We will add a new test suite for tests that can only be tested in production. As there is no test environment for Featurebase at our pricing tier we need to test in production. Some more expensive Featurebase pricing tiers allow user segmentation, which we could have used to setup a de-facto test environment in Featurebase.

On your Qase dashboard, click "Add suite":

Name the new suite "Production Exclusive", set the "Parent suite" to "Common" and give the new suite a description. Then click "Create":

Next create a new test case for our "Production Exclusive" test suite. Set the test title to "Changelog Widget", add a suitable description and set the other fields as appropriate:

Now add test steps to your new test case. Then click "Save" to save your new test case:

Your new test case show now be present in the "Production Exclusive" test suite:

Web

To take the changelog widget into use in our web app, copy and paste the HTML from above into your root.html.heex layout file. The pasted HTML should be the last item in the section of root.html.heex. Your updated root.html.heex should now look something like this:

root.html.heex

<!DOCTYPE html>
<html lang="en" class="[scrollbar-gutter:stable]">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="csrf-token" content={get_csrf_token()} />
    <.live_title suffix="">
      {assigns[:page_title] || "Epic Fantasy Forge"}
    </.live_title>
    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
    <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
    </script>

<!-- Featurebase -->
    <script>
      !(function(e,t){const a="featurebase-sdk";function n(){if(!t.getElementById(a)){var e=t.createElement("script");(e.id=a),(e.src="https://do.featurebase.app/js/sdk.js"),t.getElementsByTagName("script")[0].parentNode.insertBefore(e,t.getElementsByTagName("script")[0])}}"function"!=typeof e.Featurebase&&(e.Featurebase=function(){(e.Featurebase.q=e.Featurebase.q||[]).push(arguments)}),"complete"===t.readyState||"interactive"===t.readyState?n():t.addEventListener("DOMContentLoaded",n)})(window,document);
    </script>
    <script>
      Featurebase("init_changelog_widget", {
        organization: "epicfantasyforge",
        dropdown: {
          enabled: false
        },
        locale: "en",
        popup: {
          autoOpenForNewUpdates: true,
          enabled: true,
          usersName: "Worldbuilder"
        },
        theme: "dark"
      })
    </script>
  </head>
  <body>
    {@inner_content}
  </body>
</html>

App

To take the changelog widget into use in our Tauri app, copy and paste the HTML from above into your app.html file. The pasted HTML should be the last item in the section of app.html. Your updated app.html should now look something like this:

app.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Epic Fantasy Forge</title>
    %sveltekit.head%

    <!-- Featurebase -->
    <script>
      !(function(e,t){const a="featurebase-sdk";function n(){if(!t.getElementById(a)){var e=t.createElement("script");(e.id=a),(e.src="https://do.featurebase.app/js/sdk.js"),t.getElementsByTagName("script")[0].parentNode.insertBefore(e,t.getElementsByTagName("script")[0])}}"function"!=typeof e.Featurebase&&(e.Featurebase=function(){(e.Featurebase.q=e.Featurebase.q||[]).push(arguments)}),"complete"===t.readyState||"interactive"===t.readyState?n():t.addEventListener("DOMContentLoaded",n)})(window,document);
    </script>
    <script>
      Featurebase("init_changelog_widget", {
        organization: "epicfantasyforge",
        dropdown: {
          enabled: false
        },
        locale: "en",
        popup: {
          autoOpenForNewUpdates: true,
          enabled: true,
          usersName: "Worldbuilder"
        },
        theme: "dark"
      })
    </script>
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

Add Changelog

On Saturdays, just before a release, we add a new Changelog in Featurebase and schedule the changelog to be published on Sunday at 06:00. The changelog should automatically show as a popup in the web app and the Tauri app.

To test whether the changelog widget is working properly, we can temporarily create a new changelog for testing purposes and immediately delete it once our tests are done.

Tip

Note that to test this, you first need to start your web app and Tauri app and view the main page before creating the changelog entry. The Featurebase changelog widget has logic to not display the changelog if this user is interacting for the first time with our web app or Tauri app. The changelog is only displayed if the user used our web app or Tauri app before and there has been a new changelog published since their last visit.

To create new changelog in Featurebase, from your Featurebase dashboard, click on the "Changelog" icon on the left sidebar and click on "+ New Changelog":

Now add an image to your changelog and give it a title and a description. For real releases the title should mention the platforms targeted in this release and the description should focus on the contents of the release. The image can be used to showcase a new feature or can be used for decorative purposes only. When using an image for decorative purposes only you can generate images using Leonardo.Ai. See the Image Generation section on the AI page of this guide.

Ensure the "Show from website & widgets" checkbox is ticked and optionally tick the "Send email to x subscribers" button. Optionally adjust any of the other settings such as "Targeted users", etc.

Once you are done, open the "Publish changelog" accordion and choose "Publish now". For changelogs we create for actual releases we will choose "Schedule for later" instead to coincide with the actual release. However for testing purposes we can immediately publish.

Once published, the next time you access your web app the changelog popup should display:

The changelog will only display once. The next time you use the app it will not display unless new changelogs have been published. In the Tauri app for Android the changelog will be displayed like this:

Unfortunately there seems to be an incompatiblity between the WebKit browser engine Tauri uses and the Featurebase widgets. However this issue seems limited in scope, it only seems to affect certain platforms (e.g. certain Linux distributions). The issue may disappear in future as WebKit is updated.

To embed the feedback widget, start by going to the "In-app widgets & embeds" page like you already did above. On that page click "How to Collect Feedback":

As before, scroll down to the "Installing" section and select the "HTML" tab. Then click the "Copy" button to copy the HTML code snippet.

You can either use the copied snippet and manually customize it or use the Epic Fantasy Forge equivalent snippet and customize it as necessary:

<!-- Featurebase Feedback Widget -->
    <script>
      Featurebase("initialize_feedback_widget", {
        locale: "en",
        metadata: null,
        organization: "epicfantasyforge",
        placement: "right",
        theme: "dark"
      });
    </script>

Notice how in the above snippet we removed the first <script> block. We don't need it as it is exactly the same one we already added with the changelog widget above.

Tests

As we already did previously for the Featurebase changelog widget, we will add a manual test case for the Featurebase feedback widget:

Web

To take the feedback widget into use in our web app, copy and paste the HTML from above into your root.html.heex layout file. The pasted HTML should be the last item in the section of root.html.heex. Remember to not duplicate the first <script> block to load the Featurebase SDK. It is included in both the changelog and feedback widget code snippets provided by Featurebase. You can move this duplicate <script> block into its own section before the changelog and feedback specific sections. Your updated root.html.heex should now look something like this:

root.html.heex

<!DOCTYPE html>
<html lang="en" class="[scrollbar-gutter:stable]">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="csrf-token" content={get_csrf_token()} />
    <.live_title suffix="">
      {assigns[:page_title] || "Epic Fantasy Forge"}
    </.live_title>
    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
    <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
    </script>

<!-- Featurebase -->
    <script>
      !(function(e,t){const a="featurebase-sdk";function n(){if(!t.getElementById(a)){var e=t.createElement("script");(e.id=a),(e.src="https://do.featurebase.app/js/sdk.js"),t.getElementsByTagName("script")[0].parentNode.insertBefore(e,t.getElementsByTagName("script")[0])}}"function"!=typeof e.Featurebase&&(e.Featurebase=function(){(e.Featurebase.q=e.Featurebase.q||[]).push(arguments)}),"complete"===t.readyState||"interactive"===t.readyState?n():t.addEventListener("DOMContentLoaded",n)})(window,document);
    </script>

<!-- Featurebase Changelog Widget -->
    <script>
      Featurebase("init_changelog_widget", {
        organization: "epicfantasyforge",
        dropdown: {
          enabled: false
        },
        locale: "en",
        popup: {
          autoOpenForNewUpdates: true,
          enabled: true,
          usersName: "Worldbuilder"
        },
        theme: "dark"
      })
    </script>

<!-- Featurebase Feedback Widget -->
    <script>
      Featurebase("initialize_feedback_widget", {
        locale: "en",
        metadata: null,
        organization: "epicfantasyforge",
        placement: "right",
        theme: "dark"
      });
    </script>
  </head>
  <body>
    {@inner_content}
  </body>
</html>

Tip

There seems to be a bug when the Feedback widget button is displayed on Google Chrome on a page that is too short to scroll. The Feedback widget appears to be cut off:

To workaround this issue you can configure in CSS to always display the scroll bar, even when the page is too short for scrolling. With this workaround in place the feedback widget button displays normally:

To apply this workaround, add the below to your app.css:

app.css

/* Workaround for Chrome feedback widget issue */
body {
  overflow-y: scroll;
}

App

To take the feedback widget into use in our Tauri app, copy and paste the HTML from above into your app.html file. The pasted HTML should be the last item in the section of app.html. Remember to not duplicate the first <script> block to load the Featurebase SDK. It is included in both the changelog and feedback widget code snippets provided by Featurebase. You can move this duplicate <script> block into its own section before the changelog and feedback specific sections. Your updated app.html should now look something like this:

app.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Epic Fantasy Forge</title>
    %sveltekit.head%

    <!-- Featurebase -->
    <script>
      !(function(e,t){const a="featurebase-sdk";function n(){if(!t.getElementById(a)){var e=t.createElement("script");(e.id=a),(e.src="https://do.featurebase.app/js/sdk.js"),t.getElementsByTagName("script")[0].parentNode.insertBefore(e,t.getElementsByTagName("script")[0])}}"function"!=typeof e.Featurebase&&(e.Featurebase=function(){(e.Featurebase.q=e.Featurebase.q||[]).push(arguments)}),"complete"===t.readyState||"interactive"===t.readyState?n():t.addEventListener("DOMContentLoaded",n)})(window,document);
    </script>

    <!-- Featurebase Changelog Widget -->
    <script>
      Featurebase("init_changelog_widget", {
        organization: "epicfantasyforge",
        dropdown: {
          enabled: false
        },
        locale: "en",
        popup: {
          autoOpenForNewUpdates: true,
          enabled: true,
          usersName: "Worldbuilder"
        },
        theme: "dark"
      })
    </script>

    <!-- Featurebase Feedback Widget -->
    <script>
      Featurebase("initialize_feedback_widget", {
        locale: "en",
        metadata: null,
        organization: "epicfantasyforge",
        placement: "right",
        theme: "dark"
      });
    </script>
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

Add Feedback

With the above changes users of our web app and Tauri app should now be able to provide feedback. The feedback button is always displayed on the right side of the screen as we have configured above. In our desktop app, the feedback widget looks like this:

On the other platforms and in web it should look similar.

To embed the survey widget, start by going to the "In-app widgets & embeds" page like you already did above for the other widgets. On that page click "Survey setup":

As before, scroll down to the "Installing" section and select the "HTML" tab. Then click the "Copy" button to copy the HTML code snippet.

You can either use the copied snippet and manually customize it or use the Epic Fantasy Forge equivalent snippet and customize it as necessary:

<!-- Featurebase Survey Widget -->
    <script>
      Featurebase(
        "initialize_survey_widget",
        {
          organization: "epicfantasyforge",
          placement: "bottom-right",
          theme: "dark",
          locale: "en",
        },
        (err) => {}
      );
    </script>

Notice how in the above snippet we removed the first <script> block. We don't need it as it is exactly the same one we already added with the changelog widget above.

Tests

As we already did previously for the other Featurebase widgets, we will add a manual test case for the Featurebase survey widget:

Web

To take the survey widget into use in our web app, copy and paste the HTML from above into your root.html.heex layout file. The pasted HTML should be the last item in the section of root.html.heex. Remember to not duplicate the first <script> block to load the Featurebase SDK. It is included in the changelog, feedback and survey widget code snippets provided by Featurebase. You can move this duplicate <script> block into its own section before the changelog, feedback and survey specific sections. Your updated root.html.heex should now look something like this:

root.html.heex

<!DOCTYPE html>
<html lang="en" class="[scrollbar-gutter:stable]">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="csrf-token" content={get_csrf_token()} />
    <.live_title suffix="">
      {assigns[:page_title] || "Epic Fantasy Forge"}
    </.live_title>
    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
    <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
    </script>

<!-- Featurebase -->
    <script>
      !(function(e,t){const a="featurebase-sdk";function n(){if(!t.getElementById(a)){var e=t.createElement("script");(e.id=a),(e.src="https://do.featurebase.app/js/sdk.js"),t.getElementsByTagName("script")[0].parentNode.insertBefore(e,t.getElementsByTagName("script")[0])}}"function"!=typeof e.Featurebase&&(e.Featurebase=function(){(e.Featurebase.q=e.Featurebase.q||[]).push(arguments)}),"complete"===t.readyState||"interactive"===t.readyState?n():t.addEventListener("DOMContentLoaded",n)})(window,document);
    </script>

<!-- Featurebase Changelog Widget -->
    <script>
      Featurebase("init_changelog_widget", {
        organization: "epicfantasyforge",
        dropdown: {
          enabled: false
        },
        locale: "en",
        popup: {
          autoOpenForNewUpdates: true,
          enabled: true,
          usersName: "Worldbuilder"
        },
        theme: "dark"
      })
    </script>

<!-- Featurebase Feedback Widget -->
    <script>
      Featurebase("initialize_feedback_widget", {
        locale: "en",
        metadata: null,
        organization: "epicfantasyforge",
        placement: "right",
        theme: "dark"
      });
    </script>

<!-- Featurebase Survey Widget -->
    <script>
      Featurebase(
        "initialize_survey_widget",
        {
          organization: "epicfantasyforge",
          placement: "bottom-right",
          theme: "dark",
          locale: "en",
        },
        (err) => {}
      );
    </script>
  </head>
  <body>
    {@inner_content}
  </body>
</html>

App

To take the survey widget into use in our Tauri app, copy and paste the HTML from above into your app.html file. The pasted HTML should be the last item in the section of app.html. Remember to not duplicate the first <script> block to load the Featurebase SDK. It is included in the changelog, feedback and survey widget code snippets provided by Featurebase. You can move this duplicate <script> block into its own section before the changelog, feedback and survey specific sections. Your updated app.html should now look something like this:

app.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Epic Fantasy Forge</title>
    %sveltekit.head%

    <!-- Featurebase -->
    <script>
      !(function(e,t){const a="featurebase-sdk";function n(){if(!t.getElementById(a)){var e=t.createElement("script");(e.id=a),(e.src="https://do.featurebase.app/js/sdk.js"),t.getElementsByTagName("script")[0].parentNode.insertBefore(e,t.getElementsByTagName("script")[0])}}"function"!=typeof e.Featurebase&&(e.Featurebase=function(){(e.Featurebase.q=e.Featurebase.q||[]).push(arguments)}),"complete"===t.readyState||"interactive"===t.readyState?n():t.addEventListener("DOMContentLoaded",n)})(window,document);
    </script>

    <!-- Featurebase Changelog Widget -->
    <script>
      Featurebase("init_changelog_widget", {
        organization: "epicfantasyforge",
        dropdown: {
          enabled: false
        },
        locale: "en",
        popup: {
          autoOpenForNewUpdates: true,
          enabled: true,
          usersName: "Worldbuilder"
        },
        theme: "dark"
      })
    </script>

    <!-- Featurebase Feedback Widget -->
    <script>
      Featurebase("initialize_feedback_widget", {
        locale: "en",
        metadata: null,
        organization: "epicfantasyforge",
        placement: "right",
        theme: "dark"
      });
    </script>

    <!-- Featurebase Survey Widget -->
    <script>
      Featurebase(
        "initialize_survey_widget",
        {
          organization: "epicfantasyforge",
          placement: "bottom-right",
          theme: "dark",
          locale: "en",
        },
        (err) => {}
      );
    </script>
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

Add Survey

To test whether the survey widget is working properly, we can temporarily create a new survey for testing purposes and immediately delete it once our tests are done.

To create new survey in Featurebase, from your Featurebase dashboard, click on the "Surveys" icon on the left sidebar and click on "+ New Survey":

Select a survey type:

Adjust the configuration of the survey as necessary and then click "Save Survey" once you are done. Then click on "Not Running" and select "Start":

Your survey should now be running:

When you open the web app, the survey should now appear in the bottom right corner:

This is what the survey widget looks like on the desktop app:

This is what the survey widget looks like on the mobile app: