Hello, world!

This example introduces the fundamentals of loading content in ADK containers, all in one file.

Here is what the code does:

  1. Loads and configures the library. In this case we define a container called my-container which loads content from the builtin adk.hello provider.
  2. Creates a corresponding container element in the body which will display the loaded content.
  3. Attaches the library to the container element which causes the container to request content from the provider.
index.html
<!DOCTYPE html>
<html>
<head>
    <script>window.adk = window.adk || { cmd: [] }</script>
    <script async src="https://cdn.advisible.com/adk-1.10.5.js"></script>
    <script>
        adk.cmd.push(function () {
            adk.config()
                .addContainer('my-container', adk.container.config()
                    .provider('adk.hello'))
                .apply()
                .init(advisibleID) // use your Advisible ID here
        })
    </script>
</head>
<body>
    <div data-adk-container="my-container"></div>
    <script>
        adk.cmd.push(function () {
            adk.container.attach()
        })
    </script>
</body>
</html>

Note. The init call in the code above has a parameter advisibleID that is not defined. If you do not yet have an Advisible ID, feel free to evaluate the library by just omitting the parameter.

Result

The result may not look much. It's just a colored box not doing anything. However, in the following examples we will show you how the container abstraction opens a toolbox for making professional ad integrations.

But let's start with some refactoring.