# Theming You can substantially change the look and feel of your touchpoint by adding a few simple theming configuration options:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Touchpoint</title>
    <link
      href="https://db.onlinewebfonts.com/c/0970e3fd1aa7e6ff6937c76a583f3a30?family=BW+Haas+Text+Mono+C+55+Rom+Regular"
      rel="stylesheet"
    />
  </head>

  <body
    style="
      background-image: url(https://platform.nlx.ai/onboarding-bg/voiceplus.webp);
      background-size: cover;
      color: white;
    "
  >
    <div
      style="width: 40vw; height: 80vh; margin: auto; padding-top: 10vh"
    ></div>
    <script type="module">
      import {
        create,
        html,
      } from "https://unpkg.com/@nlxai/touchpoint-ui/lib/index.js?module";

      const touchpoint = await create({
        config: {
          applicationUrl: "REPLACE_WITH_APPLICATION_URL",
          headers: {
            "nlx-api-key": "REPLACE_WITH_API_KEY",
          },
          languageCode: "en-US",
        },
        windowSize: "full",
        userMessageBubble: true,
        agentMessageBubble: true,
        chatMode: true,
        theme: {
          accent: "rgba(255, 253, 114, 1)",
          primary80: "rgba(255, 255, 255, 0.85)",
          secondary80: "rgba(0, 2, 9, 0.4)",
          background: "rgba(35, 43, 80, 0.9)",
          fontFamily: "'BW Haas Text Mono C 55 Rom Regular', monospace",
        },
      });
    </script>
  </body>
</html>
which results in