appendBcmScoreCard(options)

Appends a Score Card component to a specified HTML element.

Parameters

• options (Object): Score Card configuration.
  • scoreHistory (Array of objects, required) Array of objects { score: number; date:string }. Must contain at least one object.
  • selector (String, optional): CSS selector of the target element. Default: body.
  • data (Object, optional): Embedded configuration data. See Configure
  • aspectRatio (string, optional): Aspect ratio of iframe element. Default: "5 / 5"
  • customize(Object): Font and colours customization object.
    • fontFamily (string): Customize the font using any default browser font. Adding a custom font is possible but requires extra code — please contact us for support.
    • mainCardTitleColor (string): Text color of the main card's title.
    • mainCardTitleSize (string): Font size of the main card's title (e.g., '32px').
    • mainCardBgColor (string): Background color of the main score card.
    • mainCardBorderStyle (string): CSS border style of the main score card (e.g., 'none', #ff0000).
    • mainCardIndicatorBorderColor (string): Border color of the card's circular indicator (in the upper-left corner).
    • mainCardIndicatorBgColor (string): Background color of the card's circular indicator (in the upper-left corner).
    • badgeBgColor (string): Background color for primary badge in the bottom of the card.
    • badgeTextColor (string): Text color for primary badge in the bottom of the card.
    • badge2BgColor (string): Background color for secondary (light) badge in the bottom of the card.
    • badge2TextColor (string): Text color for secondary badge in the bottom of the card.
    • coreColor1 → coreColor5 (string): Circle colours indicating score. If score is low not all of the circles will be filled.
    • baseColor1 → baseColor5 (string): Neutral background colors for circles indicating missing score. If score is high some of the neutral circles will not be shown.
    • typeColor1 (string): Color of the narrow circle separating filled in circles with core color and "empty" ones filled with base color.
    • scoreTextFill (string): Fill color for the main numeric score.
    • yourScorePathFill (string): Color of the path stroke behind "Your Score".
    • yourScoreDashedStroke (string): Dashed outline stroke color for the user's score gauge. Connects circle and score text.
    • idealScoreDashedStroke (string): Dashed outline stroke color for the ideal score indicator. Connects ideal score range text with particular circle on the SVG.
    • idealScorePathFill (string): Color of the text explaining ideal score range.
    • scoreChangeTextColor (string): Text color used for score change information (e.g., +12 pts or -8 pts).

Example

Tento.appendBcmScoreCard({
  selector: '#score-card-container',
  scoreHistory: [{ score: 580, date: '2025-05-30' }],
  customize: {
    // Font family
    fontFamily: 'Verdana',

    // Main card colors
    mainCardBgColor: '#ffffff',
    mainCardBorderStyle: 'none',
    mainCardIndicatorBorderColor: '#424242',
    mainCardIndicatorBgColor: '#45B7D8',
    mainCardTitleColor: '#292F6D',
    mainCardTitleSize: '32px',

    // Card colors // Optional section, only applicable if not "main content" version
    cardBorderColor: 'none',
    cardIndicatorBorderColor: '#424242',
    cardIndicatorBgColor: '#45B7D8',

    // Badge colors
    badgeBgColor: '#45B7D8',
    badgeTextColor: 'white',

    // Badge 2 colors
    badge2TextColor: '#292F6D',
    badge2BgColor: '#F0F0F0',

    // Credit score circle colors
    coreColor1: '#66C3E5',
    coreColor2: '#41A0BF',
    coreColor3: '#1F7A96',
    coreColor4: '#0A4C64',
    coreColor5: '#192F4D',
    baseColor1: '#FFFFFF',
    baseColor2: '#FAFAFA',
    baseColor3: '#F7F7F7',
    baseColor4: '#F4F4F4',
    baseColor5: '#F0F0F0',
    typeColor1: '#1A1A3A',
    scoreTextFill: '#211747',
    yourScorePathFill: '#211747',
    yourScoreDashedStroke: '#6EB1C4',
    idealScoreDashedStroke: '#6EB1C4',

    scoreChangeTextColor: '#292F6D',
  },
})