We're Here To Help

You can now personalize the styling of your widgets effortlessly through our new Dashboard app! To get started, follow these steps:

Access the Widgets Page: Log in to your nFusion dashboard and navigate to the widgets page.

Edit a Widget: In the widgets page, locate the widget you want to customize, and click the ‘edit’ pencil icon in the actions column. This action will take you to the widget’s editor screen.

Customization Sections: On the widget’s editor screen, you’ll find two main sections:

• File Upload Section: This section allows you to upload files, such as CSS and (JS, available only in the advanced widget package), as well as an image file.
• Widget Settings Section: Here, you can configure specific widget settings. In this guide, we’ll focus on the file upload section and explore how to upload a custom CSS file.

Before You Begin:

Before uploading your custom CSS, we highly recommend reviewing our CSS best practices documentation to ensure that your styling is applied without any conflicts.

Uploading Custom CSS:

To upload your custom CSS file, follow these steps:

1. Click the ‘upload’ icon button under the ‘Upload CSS’ column. This action will open a file explorer, allowing you to select the CSS file you wish to upload.
2. Once you’ve selected a CSS file, you’ll receive a confirmation message confirming that your CSS file has been successfully uploaded.

Preview Your Changes:

To see your customizations in action, return to the widgets page and click the ‘preview’ button for the widget you’ve just edited. This will open a widget preview page where you can view your new CSS styling.

Troubleshooting CSS Application:

If you find that your custom CSS is not being applied, consider the following solutions:

• Clearing Cache and Hard Reload:
  • Open the Developer Console using Control+Shift+I (Windows/Linux) or Option+Command+I (Mac), or via Tools > Developer > Developer Tools, or by right-clicking and choosing Inspect.
  • Press and hold or right-click the Refresh Icon.
  • Choose “Empty Cache and Hard Reload” from the dropdown.
• Check CSS Specificity:
  • Open the Developer Console and inspect the element you want to style. In the “Styles” panel on the right-hand side, ensure that your CSS rule is not crossed out. If it is, this indicates a different CSS rule may have higher specificity.
• Verify CSS Selectors and File:
  • Check for typos in your CSS selectors and their order.
  • Ensure the CSS file you uploaded is the correct one by using the Developer Console’s “Network” tab and finding the CSS request corresponding to your custom CSS file.

If none of the above solutions work, please contact our support team at support@nfusionsolutions.com. When reporting your issue, be sure to include all the steps you’ve taken to resolve the problem before reaching out. This will help us provide the quickest possible solution to your customization needs.

To do this, each widget must have a unique ID so that when they are loaded into the page, there are no javascript errors or conflicts. Therefore, when you are adding multiple instances of the same widget to a single page, you need to change the ID of the DIV element so that it is unique within that page; then, modify the src attribute within the script by adding “/your-id” to the end of the root domain. By changing the ID and modifying the src, you are telling the script which DIV element to load the chart into. For example, here is a default chart widget script that has been copied from the preview page:

<div id='c528ee05-722d-4762-a635-213197f7b8b4' style='width:100%;height:100%;'></div>
<script>
    (function () {
        var t = document.getElementsByTagName('script')[0];
        var s = document.createElement('script');
        s.async = true;
        s.src =
            'https://widget.nfusionsolutions.com/widget /script/chart/1/32796899-2cc3-4454-ac51-2c95c78799af/c528ee05-722d-4762-a635-213197f7b8b4';
        t.parentNode.insertBefore(s, t);
    })();
</script>

Now say you wanted to add another chart on the same page (maybe to change the selected symbol for example). Here is what it would look like to add a second instance of the same widget to a single page:

<div id='my-custom-id' style='width:100%;height:100%;'></div>
<script>
    (function(){
        var t = document.getElementsByTagName('script')[0];
        var s = document.createElement('script'); s.async = true;
        s.src = 'https://widget.nfusionsolutions.com/widget/script/chart/1/32796899-2cc3-4454-ac51-2c95c78799af/c528ee05-722d-4762-a635-213197f7b8b4/my-custom-id';
        t.parentNode.insertBefore(s, t);
    })();
</script>

Notice how everything is the same except for the DIV element ID and the end of the src attribute.

If you are logged in and want to change your password:

While logged in to the product catalog, navigate to the menu item in the upper right-hand corner of your screen within the navigation menu and click on the item that displays your username. Once you have clicked your username, a dropdown will appear with four options. Click on the second option, “password”. From here, you can simply create a new password. Enter the old password for the specified user and then enter the user’s new password. Last, confirm the new password to assure that it is correct. Once you have filled out all of the required fields in order to reset your password, click the submit button at the bottom of the form and it will submit your changes. Your new password will then take effect immediately.

If you are not logged in and have forgotten/lost your password:

Try to utilize the password reset functionality. At the login screen click on “can’t access your account”, then choose “work or school” account, then complete the prompts to initiate a password reset. If you are still unable to log in contact our support team.

To implement your widgets using our currency helper there are two simple steps.
1. To ensure that the helper script is available before attempting to use it, you must add the following script within your header:

<script src="https://widgetcdn.nfusionsolutions.com/asset/static/1/common/1/js/currency-interop.min.js"></script>

2. Now that the script is available to use, you can add a widget to the page by using code similar to the following:

<div id='YOUR-WIDGET-ID' style='width:100%;height:100%;'></div>
<script>
    (function(){
         nFSCurrencyHelper.init('YOUR-WIDGET-SCRIPT-SRC-URL');
     })();
</script>

Simply replace “YOUR-WIDGET-ID” in the above script with the ID that is in your widgets preview page script. Then similarily, replace the “YOUR-WIDGET-SCRIPT-SRC-URL” with the url being assigned to the s.src variable that is in your widgets preview page script.
This script is very similar to our default widget scripts, with the exception that you need to use the “nFSCurrencyHelper.init” function and pass the function the widget’s src.

Open your web browser and visit either your nFusion Dashboard at https://dashboard.nfusionsolutions.com/ or your nFusion Catalog at https://nfusioncatalog.com/account/login?tenantalias={your_tenant_name}&scheme=AzureAdB2C. If you are not already logged in, you will be presented with the login page.

As you step into the nFusion Cloud of solutions, you can tap into the power of your existing Google, Microsoft, Apple, or Facebook accounts. For instance, if the email you received your Dashboard invite on is linked to a Google or Gmail account, a simple click on the Google button gets you authenticated in a snap making logging in a breeze!

Should your email address lack association with any of these four providers, there’s an alternative option. Just click “sign up now” at the top, and you can easily create a new account using your email address, alongside a password of your preference. This empowers you with the ability to establish a new account with ease.

In one of our latest releases to the Product Pricing Catalog, we’ve added an SSO (Single Sign On) feature that allows you to log into your Product Pricing Catalog and the Dashboard using the same user account! This will help streamline the process and minimize the time you spend logging into your nFusion applications!

To switch to this new way of Authentication, you need to navigate to the Users page of your nFusion Dashboard by visiting: https://dashboard.nfusionsolutions.com/en/pages/users

Here you’ll see a table of users that currently have access to your Product Catalog. To add your user record to this table, click the “Add user” under the users section of the page. Then enter your name and the email address to which you received your nFusion Dashboard invitation. Under “Role” select the role you would like to provide this user account with. The “Administrator” role allows both read and write access to products, product families, etc. whereas the “Sales” role is essentially a read-only view of the product catalog for those users who only need viewing access to the products within the Catalog. Once this information has been entered, click “Submit” towards the bottom left-hand corner of the page.

The user you’ve just added can now log into the catalog and you should have received an email to help you do so. To accept your invitation to join the Product Catalog, navigate to https://nfusioncatalog.com/account/login?tenantalias={your_tenant_name}&scheme=AzureAdB2C. Here is where you can tap into the power of your existing Google, Microsoft, Apple, or Facebook accounts. For instance, if the email you received your Dashboard invite on is linked to a Google or Gmail account, a simple click on the Google button gets you authenticated in a snap making logging in a breeze!

Now that you’re logged in using your new user account that is utilizing your personal social authentication method, you no longer need to log into the Dashboard using the old admin and or sales emails that were previously provided to you.