Prerequisits

Your user-interface allows to place script-tags into a web page.
Your have a url the Cubbles RTE webpackage is available from and your web page uses have access to.

Configuration (optional)

Page developer can (optionally) provide a configuration object for the Cubbles RTE within the namespace "window.cubx".

With CRCInit page developers are able to define rootDependencies for the web page. Defining a dependency on root level makes sure

The artifact a dependency declaration points to will be loaded. This is done regardless of whether this artifact is required when the web page is initially loaded.
If any artifact used within the web page depends on an artifact of any version of the given webpackage it will be loaded from the webpackage in the given version.
Background information ...

Loading the same artifact mutiple times (perhaps in different versions) leads to an unpredictable behavoir within the browser - also if they have been refered from different components. This way the browser and client side components work as designed and as we know it from any webpage using components or not. Browsers do not provide isolated runtimes for different components.
Therefore the RTE (since version 2.1) has a dependency resolution mechanim implemented that prefers the webpackage version with the shortest path within the page dependency tree.
To affect the dependeny tree specified artifacts can be added and/or excluded by configuration. The combination of exclude and addition of dependencies allows to simply override/replace any version of any artifact.

webpackage.modelVersion >= 9

<script>
    window.cubx = {
        CRCInit: {
            rootDependencies: [
                 {
                    webpackageId: "demo-package@1.0"
                    artifactId: "util1"
                 }
            ]
        }
    }
</script>

webpackage.modelVersion < 9

// if the webpackage is of modelVersion < 9, an endpoint reference is required 
<script>
    window.cubx = {
        CRCInit: {
            rootDependencies: [
                 {
                    webpackageId: "demo-package@1.0"
                    artifactId: "util1",
					endpoint: "main"
				 }
            ]
        }
    }
</script>

Integration

Simply put two <script> tags into the webpage (into the head or the body) to make the RTE (the Cubbles RunTime Extension) available on client side:

<script src="<base-url>/<store>/cubx.core.rte@2.3.0/webcomponents-lite/webcomponents-lite.js">
<script src="<base-url>/<store>/cubx.core.rte@2.3.0/crc-loader/js/main.js"></script>

Scripts:

webcomponents-lite: To make enable all browsers to deal with webcomponents, some polyfills need to be loaded.
crc-loader: The RTE provides the entrypoint crc-loader/js/main.js. Refere to this script and the RTE will be available on client side.

Placeholders:

<base-url>: The url a Cubbles Base is located on.
<crc-loader>: The name of the store all your webpackages (including the RTE webpackage) are available from.

CRC-Loader / optional attributes:

data-crcinit-loadcif ("true"|"false"; default="true"): Load the Component-Interaction-Framework (CIF).
If you just use the RTE to load artifacts of type "app" and/or "utility" you can opt-out the CIF to be loaded.
```
<script src="<crc-loader>" data-crcinit-loadcif="false"></script>
```
data-cubx-startevent (default="DOMContentLoaded"): Event to initially trigger the RTE to
- parse top-level dependencies from the document,
- resolve transitive depencies,
- trigger the browser to load the dependencies
- and trigger the CIF to do it's job.
It might be useful to use another event - e.g. if the content containing cubbles-tags is included into the document in an asyncronous way.
```
<script src="<crc-loader>" data-cubx-startevent="MyCubxStartEvent"></script>
```
If you just use the RTE to load artifacts of type "app" and/or "utility" you can opt-out the CIF to be loaded.