Skip to main content

Amending SciFree Search Widget

Updated

The widget is a search box you can embed in your university webpage to allow researchers to search for journals directly from your website. The colours used to display the widget are based on your university branding, configured in the JST Admin tool. In this article you will find out how to find the widget, where to place it and how to customise it.

Where is the widget?

  1. First of all go to the Branding page either from the Main Dashboard or from the Side Menu
  2. On the General tab scroll down to Widget.
  3. Here you will find a preview of the Widget as well as the code snippet.

Where do I place the widget?

Placing the widget will depend on the website platform. For instance, it can be embedded as an “Embed”, by accessing the “Code snippet” section inside the embed object. In plain html, the script can be placed wherever you need it to be.

Widget customisation

The widget can be tweaked in two ways:

  1. By using the widget type property
  2. By directly modifying the widgets code

Using the widget type property to customise

The script looks like this:

<div id="scfwid" data-account="youraccount"></div> <script src="https://search.scifree.se/assets/external/widget.js"></script>

And translates to something similar to the image below depending on your university’s branding:

Figure 2. Default styling of widget code.

In Figure 2, is what we call the default style. "youraccount" is the path name given to your search (search.scifree.se/youraccount).

However, the widget can be configured very easily to look differently, if you need something more self-contained, see Figure 3 as an example:

Figure 3. Example of how the widget can be styled

This can be achieved by adding data-type="compact" to the divin the widget code. See this full example to understand it better:

 

<div id="scfwid" data-account="youraccount" data-type="compact"></div> <script src="https://search.scifree.se/assets/external/widget.js"></script>

Directly modifying the widgets code

By directly modifying the widgets code you can achieve full control over how the widget looks.

  1. Place the widget as you normally would, using either the default style or the compact, whichever looks closer to what you want to achieve:
    <div id="scfwid" data-account="youraccount" data-type="compact"></div> <script src="https://search.scifree.se/assets/external/widget.js"></script>
  2. Listen for the “load” event on the script by adding a hook, here we are just preparing everything to customise the widget: onload="onScriptLoaded()".
    <script src="https://search.scifree.se/assets/external/widget.js" onload="onScriptLoaded()" ></script>
  3. Create the script to customise the widget. You can create it either in the <head> tags or just below the widget div:
    <script lang="javascript"> function onScriptLoaded() { } </script>This code will run once the widget is fully loaded, allowing you to customise the instance
  4. Listen to the scifree.onWidgetLoaded event inside the onScriptLoaded. This will return a promise with the widget allowing you to customise the different components it has:
    <script lang="javascript"> function onScriptLoaded() { scifree.onWidgetLoaded().then((widget) => { }); } </script>
  5. The widget object that the on Widget Loaded returns has 3 objects you can access for customization:
    - Form
    - Input
    - Button
    All of them are html elements you can alter to your liking. Here is a full example that would append new styles to the ones already existing:
    <div id="scfwid" data-account="youraccount" data-type="compact"></div>     <script lang="javascript">       function onScriptLoaded() {         scifree.onWidgetLoaded().then((widget) => {           var customFormStyles = 'border: 1px solid red;';           var formStyles = widget.form.getAttribute('style') + customFormStyles;           widget.form.setAttribute('style', formStyles);           var customInputStyles = 'border: 1px solid red;';           var inputStyles = widget.input.getAttribute('style') + customInputStyles;           widget.input.setAttribute('style', inputStyles);           var customButtonStyles = 'border: 1px solid red;';           var buttonStyles = widget.button.getAttribute('style') + customButtonStyles;           widget.button.setAttribute('style', buttonStyles);         });       }     </script>     <script       src="https://search.scifree.se/assets/external/widget.js"       onload="onScriptLoaded()"   ></script>

The above example just adds some visible red borders to all of the elements, just for show see Figure 4 below:

search widget with red borders screenshot
Figure 4. Example of how what the widget can look like with code for red borders. 

Language

For universities that have multiple languages, the language of the Widget will be based on the user browser settings. It is however possible to force the language of the Widget to always appear. Here is an example:

1. Force specific locale: <div id="scfwid" data-account="youraccount" data-locale="es"></div> <!-- Forces Spanish --> <div id="scfwid" data-account="youraccount" data-locale="en"></div> <!-- Forces English --> 2. Auto-detect from browser (default): <!-- Omit data-locale attribute --> <div id="scfwid" data-account="youraccount"></div>

Further support

If you need any help, please contact us support@scifree.se

Related articles

Comments

0 comments

Please sign in to leave a comment.