Custom texts

All component texts can be changed. To do this you can pass inside the Croupier source an i18n object with the languages you want to change. For each language you can use the component name as a key to change the texts for that particular component.

If the language is a string, you can pass a URL to a .json file, for example:

new Croupier({
  sources: [{
    name: "ets",
    url: "https://api.lemoncaas.etsfactory.com/v3",
    token: "xxxxxxxxxxxxxxxxxxx",
    lang: "en",
    i18n: {
      es: "https://myweb.com/es.json",
      en: {
        "asset-info": {
          "currency": "cash"
        }
      }
    }
  }]
});

Another option is to pass the i18n object directly to the component itself, for example:

<cr-component id="info" name="asset-info"></cr-component>

<script>
  const info = document.getElementById("info");
  info.init({
    query: "bbva",
    i18n: {
      en: {
        "asset-info": {
          currency: "cash",
        },
      },
    },
  });
</script>

Custom texts for internal components

Lemoncaas components are made with another internal webcomponents. The texts for this internal components can be change too. To do that you have to nest the internal component name inside the other component (you can see the internal components using the DOM inspector tool of your browser). For example:

<cr-component id="info" name="asset-info"></cr-component>

<script>
  const info = document.getElementById("info");
  info.init({
    query: "bbva",
    i18n: {
      en: {
        "asset-info": {
          currency: "cash",
          "block-chart": {
            date: "Another text for date",
          },
        },
      },
    },
  });
</script>