About Tinka component

Preview

Initialize

Destructure the "aboutTinka" component and initialize it from the widgets collection like this:

const { aboutTinka } = window.TinkaWidgets;
const aboutTinkaComponent = aboutTinka({ ...props });

De-initialize

You can also destroy this component manually when there is no need for it anymore. In order to do so, call the destroy() function like:

const { aboutTinka } = window.TinkaWidgets;
const aboutTinkaComponent = aboutTinka({ ...props });

aboutTinkaComponent.destroy();

Props

Property	Type	Description
`target` required	HTMLElement	The target HTML node where the component will get rendered.
`products` required	string[]	The Tinka products used in the about tinka (e.g. Credit and Credit24Months). For ease of use, we provide also the product names in `window.TinkaWidgets.products.names`. For a list of all the product names that could be enabled, please refer to this link.
`language` required	`en`, `nl`	The total order amount in cents. (e.g. 2000 for 20 euros)

Code snippet

Here is an ready to add example you could use in your code:

<head>
  <link rel="stylesheet" href="https://components.tinka.business/tinka-widgets.css" />
  <script src="https://components.tinka.business/tinka-widgets.js"></script>
</head>

<body>
  <div data-tinka-about></div>
</body>

<script>
  addEventListener('DOMContentLoaded', function () {
    const { aboutTinka, products } = window.TinkaWidgets;

		const aboutTinkaComponent = aboutTinka({
			target: document.querySelector('[data-tinka-about]'), 
			products: [products.names.Credit, products.names.Credit24Months],
			language: 'en',
		});
  });
</script>

Customization

You can use the following selectors to refer to inner elements of the widget

.about-tinka-widget is the container of the widget.
.about-tinka-widget-product-title is the product section title inside the widget.

EXAMPLE

In this example, the widget is customised to have custom font and to be displayed in columns rather than rows.

.about-tinka-widget {
    border: 1px solid #cccccc;
    background: #eeeeee;
    padding: 12px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    flex-direction: row;
}
.about-tinka-widget-product-title {
    color: gray;
    font-weight: normal;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-transform: none;
}