1.2.1 • Published 5 years ago
@testometrika/widget v1.2.1
widget-js
Widgets for websites from testometrika.com. Widgets online tests.
Demo examples:
Features:
- Adapted for mobile devices.
- Automatic width and height.
1.Installation
Load from CDN
Put this script tag to the \<head> of your page once
<script async type="text/javascript" src="https://cdn.jsdelivr.net/npm/@testometrika/widget@1/index.min.js"></script>Install through NPM
npm i @testometrika/widget --save2.Initialization
Auto initialization
<div class="testometrika_widget" id="REPLACE_KEY" data-auto_height='true' data-height_initial='700px' data-loading='lazy'></div>Manual initialization
Install through NPM
import testometrika_widget from '@testometrika/widget';
testometrika_widget.Test({key: 'REPLACE_KEY', auto_height: true, data-height_initial: '700px'});
<!--widget-->
<div id="REPLACE_KEY"></div>Load from CDN
<script async type="text/javascript" src="https://cdn.jsdelivr.net/npm/@testometrika/widget@1/index.min.js"></script>
<!--widget-->
<div id="REPLACE_KEY"></div>
<script>
window.onload = function() {
testometrika_widget.Test({key: 'REPLACE_KEY'});
}
</script>3.Configuration
| Name | Default | Description |
|---|---|---|
| auto_height | true | Automatic Iframe Height Setting (true or false) |
| height_initial | "700px" | Initial height before loading iframe (px, %, em or auto) |
| loading | "lazy" | Native lazy loading iframe (lazy, auto, eager) https://caniuse.com/#feat=loading-lazy-attr |
4.Widget usage example
<!DOCTYPE html>
<html>
<head>
<script async type="text/javascript" src="https://cdn.jsdelivr.net/npm/@testometrika/widget@1/index.min.js"></script>
</head>
<body>
<div class="testometrika_widget" id="REPLACE_KEY" data-height_initial='700px' data-auto_height='true'></div>
</body>
</html>