Prepare the HTML Page for Embedding the Oracle Analytics AI Assistant

To embed the Oracle Analytics AI Assistant, you must create or update the HTML page to use the embedding V2 method and include the required <oracle-analytics-assistant> embedding tag.

This topic contains the following information:

Doctype Declaration

Set the doctype declaration to <!DOCTYPE html>. Unpredictable behavior such as the page not rendering properly results if you use a doctype declaration other than <!DOCTYPE html>, or if you forget to include a doctype declaration.

Dir Global Attribute

Set the dir global attribute as required by the web page's locale. The dir global attribute indicates the embedded analytics content's layout direction.

Note:

If you need to support multiple locales, then use JavaScript to set the attribute.

The attribute's value options are:

  • rtl - Use for right to left layout direction.
  • ltr - Use for left to right layout direction.
  • auto - Don't use. This value isn't supported by Oracle Analytics.

<script> Tag and JavaScript Source Reference

Add a <script> tag that references embedding.js to your HTML page.

The JavaScript source's URL structure is:

  • "https://<instance>.analytics.ocp.oraclecloud.com/public/dv/v2/embedding/auto/embedding.js"

<oracle-analytics-assistant> Element

To embed the assistant, you must add the following HTML snippet with attribute values inside an appropriately sized element. Oracle Analytics generates the HTML that you need to include. The src-data parameter is the dataset that the AI assistant uses. 

<oracle-analytics-assistant 
    src-data="[&quot;XSA('<user-name>'.'<data source name>')&quot;]">
</oracle-analytics-assistant>

Basic Example

<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="utf-8">
  <script src="https://<your-OAC-instance>.analytics.ocp.oraclecloud.com/public/dv/v2/embedding/auto/embedding.js"></script>
  <style>
    html, body {
      margin: 0;
      height: 100%;
    }
    oracle-analytics-assistant {
      width: 100%;
      height: 100%;
      display: block;
    }
  </style>
</head>

<body>
  <oracle-analytics-assistant
    id="oaAssistant"
    src-data="[&quot;XSA('<user-name>'.'<data source name>')&quot;]">
  </oracle-analytics-assistant>

  <script>
    oracle.oa.embedding.ready().then(oApp => oApp.applyBindings());
  </script>
</body>
</html>

Example With Tokens

<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="utf-8">
  <script src="https://<your-OAC-Instance>.analytics.ocp.oraclecloud.com/public/dv/v2/embedding/auto/embedding.js"></script>
  <style>
    html, body {
      margin: 0;
      height: 100%;
    }
    oracle-analytics-assistant {
      width: 100%;
      height: 100%;
      display: block;
    }
  </style>
</head>
<body>
  <oracle-analytics-assistant
    id="oaAssistant"
    <!-- Reference to datasource to use with AI Assistant with " escaped to &quot; -->
    src-data="[&quot;XSA('<user-name>'.'<data source name>')&quot;]">
  </oracle-analytics-assistant>

  <script>
    const token = '<access token>';

    oracle.oa.embedding.ready().then((oApp) => {
      oApp.setEmbeddingConfig({
        oSecurityConfig: {
          eSecurityType: "token",
          oOptions: {
            credentials: "",
            tokenAuthFunction: new Function("return '" + token + "'")
          }
        }
      });
      oApp.applyBindings();
    });
  </script>
</body>
</html>