Calendar Widgets: Getting Started

How to use the widgets

To integrate our Economic Calendar widgets, you just need these easy steps.

important

Before doing these steps, make sure that the integration of our widgets has been allowed for your website. Please contact us at [email protected] to arrange this for you.

1. Load our JS library

To load the library, just place the following <script> in your page's <head> or at the end of its <body>:

<script src="https://staticcontent.fxstreet.com/widgets-v2/stable/fxs-widgets.js" defer></script>

Our recommendation is that you place at the end of your <body>, so that the load of our library does not block the rendering of your own website (as it will have a low loading and execution library). If you want to manage the priorities by yourself, you can take a look at this blog post.

2. Copy the widget declaration in your page

Copy our the div declaration of the widget and insert it in your website. In this example, you can see the declaration of our Economic Calendar Widget:

<div fxs-widget name="calendar"></div>

You can get the HTML code at the documentation page of each widget.

3. Done!

You are all set! You can take a deeper look at each widget's declaration and configure it to your choice.

We also recommend you to read our Utilities page that can help you handle more advanced cases of loading and customizing the widgets. This includes event listeners for the library load, reloading widgets, configuring widgets dynamically...

If you are having some trouble integrating the widgets, please take a look at our FAQ page.

Available Languages

Our Economic Calendar widgets are available in the following languages:

  • English: en
  • Arabic: ar
  • German: de
  • Spanish: es
  • French: fr
  • Indonesian: id
  • Russian: ru
  • Turkish: tr
  • Traditional Chinese: zh-CHT
  • Simplified Chinese: zh-CN
  • Vietnamese: vi
  • Persian: fa

Use these language codes to configure the widgets' culture parameter to your needs.

Mobile Devices

The Economic Calendar widgets have an adapted version for mobile devices. This version is enabled using the User Agent of the user's device and browser. This means that desktop devices will see the desktop version and mobile devices will see the mobile version.

Please take this into account when integrating widgets in your website or when customizing its styling.