This project contains some web components that can easily be integrated into web pages.
This project was generated with Angular CLI version 11.0.7.
To create a new web component (widget), follow this guide:
- Create the new component in the
appfolder (i.e. use this command to create theMyDashboardcomponent:ng g component MyDashboard) - Add the component to the
entryComponentsarray inapp.module.ts - Register the component in
ngDoBootstrapinapp.module.ts(see examples to understand how to do that) - Add the registered HTML tag in the
index.html
You can either put styles into to components style sheet. In this case, the widget will not be
influenced by the webpage it is embedded. If you want the widgets styles to be changeable, you
need to set ViewEncapsulation in the component decoration to None (see examples) and add
the styles in the styles.scss file.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build:elements to build the project. In the folder elements three files will be created:
scill-widgets.jsstyles.cssindex.html
To add the widgets to a web page you need to include the JS and CSS files and add ad html tag registered before:
<!doctype html>
<html lang="en">
<head>
<title>SCILL Widgets Demo</title>
</head>
<body>
<scill-task-list app-id="593776232582742019" api-key="3:8OZ=I6M~$((bzTB&E&OJRXcLE48S!:'x),F.8I*," user-id="1234" battle-pass-id="627086321190174723"></scill-task-list>
<script src="scill-widgets.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</body>
</html>This example code uses the SCILL JavaScript SDK and is not ready for production as it exposes the API key.
Developer documentation and more info about exposing API keys and using access tokens instead can be found in our developer documents: SCILL Developer Documentation