Library Config

To embed any UI component on a page, you must include the library in the header section of the page.

caution

Choose the right library URL based on the environment that you are integrating with.

<!-- For the Sandbox environment -->
<script
  src="https://js.weavr.io/sandbox/weavr-client-v2.js"
  charset="utf-8"
></script>

<!-- For the Live environment -->
<script
  src="https://js.weavr.io/secure/weavr-client-v2.js"
  charset="utf-8"
></script>

Initialise

Upon loading the library your window object will be appended with a weavr property. Next, initialise the library by providing your UI key with some other optional parameters.

init(uiKey, options);

Parameter	Type	Required?	Description
`uiKey`	string	Required	The UI Key retrieved from the Embedder Portal > API Credentials screen.
`options`	object	Optional	Describes the fonts that are to be injected in the iframe DOM and consumed by other components

Parameter Definitions

The below defines the options object

Property	Type	Required?	Description
`fonts`	object array	Required	Defines the fonts to be loaded. The array can be populate with only two types of objects. Types defined below. Type 1 and Type 2.

// Remember to change the UI key when moving your application to the Live environment

const weavrComponents = window.weavr.init(`{{uiKey}}`);

Property Definitions

`fonts`

You can specify the font(s) to be loaded and utilised from components when initialising the Weavr UI Components library by passing in the options parameter. Fonts can be injected in the components via 3 different manners (URI, Base64 & Custom Font URI )

Type 1 - The below defines the object.

Property	Type	Required?	Description
`family`	string	Required	The font family name.
`src`	string	Required	The src of the font.
`style`	string	Optional	The style of the font.
`unicodeRange`	string	Optional	The Unicode range for the font.
`weight`	string	Optional	The weight of the font.
`variant`	string	Optional	The variant of the font.
`stretch`	string	Optional	The stretch of the font.
`display`	string	Optional	The display style of the font.

Type 2 - The below defines the object.

Property	Type	Required?	Description
`cssSrc`	string	Required	Defines the font and all font properties to be loaded.

const weavrComponents = window.weavr.init("{{ui_key}}", {
  fonts: [
    {
      family: "{{Font Family Name}}",
      src: "url('{{Font URL to be imported}}')",
      /** Below are optional **/
      style: "",
      unicodeRange: "",
      weight: "",
      variant: "",
      stretch: "",
      display: "",
    },
    {
      family: "{{Font Family Name}}",
      src: "data:font/opentype;base64,{{base64 data format of font}}",
    },
    {
      cssSrc: "{{Font URL content to be retrieved}}",
    },
  ],
});

Examples

1. Initialisation with Fonts

The following example demonstrates the initialisation of the library, including the essential parameters for loading the fonts.

<!--index.html-->
<head>
  ...
  <script
    src="https://js.weavr.io/sandbox/weavr-client-v2.js"
    charset="utf-8"
  ></script>
  ...
</head>

// secure-init.js

// Keys found in example are for demonstrations only and should always be changed.
const weavrComponents = window.weavr.init("HdKUGUBAW1", {
  fonts: [
    {
      cssSrc:
        "https://fonts.googleapis.com/css2?family=Fuggles:wght@100;400;900&display=swap",
    },
  ],
});

Initialise​

Parameter Definitions​

Property Definitions​

fonts​

Examples​

1. Initialisation with Fonts​