Animuz Embed

Using iframe postMessage API

For static or initial data, use query parameters in the iframe

<iframe
  src="https://cdn.example.com/iframe.html?embedId=YOUR_ID&brandName=Acme"
></iframe>

The code inside the iframe can always read its own URL (including query parameters) using window.location.search

For dynamic or sensitive data (like the current exam question), use the

const iframe = document.getElementById("my-iframe");
iframe.contentWindow.postMessage(
  { examQuestion: "What is 2+2?" },
  "https://iframe-domain.com" // target origin
);

The iframe will be able to access through event listeners

window.addEventListener("message", (event) => {
  // Optionally check event.origin for security
  if (event.data.examQuestion) {
    // Use the exam question in your widget
    console.log("Exam question from parent:", event.data.examQuestion);
    // Store it in your app state as needed
  }
});

Note: localStorage is not shared between parent and iframe unless on the same origin, and even then, it's not a reliable way to pass dynamic, per-session data.

1. Intent Response API

Intent Response is to fix the response messages based on the intent "fixed string".

This is how intent response is used:

postMessage({
  type: "intentResponse",
  intent: "Question Submit",
  response: [
    { role: "assistant", content: "Answer 1" },
    { role: "assistant", content: "Answer 2" },
  ],
});

Where each response is directly the assistant response.

TODO: currently there is no API to call and save the responses.

2. Prompt Injection

TODO: In progress

Prompt injection is to fix the context inside the prompt on the subsequent calls. The context will always be sent until it is cleared.

postMessage({
  type: "promptInject",
  context: "Context 12345",
});

Clearing the context can be done by just sending an empty string or null

postMessage({
  type: "promptInject",
  context: null,
});

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Viewing Bundle Size

npx vite-bundle-visualizer

SVGR + SVGO

https://www.npmjs.com/package/vite-plugin-svgr

Import svg with ?react pattern and also use @svgr/plugin-svgo for optimization.

CSS Mangler

Currently we use this tool from sonofmagic for obfuscating TailwindCSS classes:

https://github.com/tailwindlabs/tailwindcss/discussions/11179

This is the instructions to use it:

https://github.com/sonofmagic/tailwindcss-mangle/tree/main/packages/unplugin-tailwindcss-mangle

Use npx tw-patch extract for extracting the css classes.

Somehow this makes the SVGs that we use broken (?) not sure if it is this or SVGO. Solving this is to define the width and height in the CSS, and remove the width and height property of the SVG file itself (or set both to 100%).

TODO

CSS Flash of Unstyled Content (FOUC)

Currently we are having problems with CSS Flickering. So I need to move some of the code to styles instead so it loads first.

Our CSS Flickers because of dynamic imports. However, I don't think that it should be dynamic because we're already know the name of the css to import. I just don't know how to inject the css to the js.

Relative references:

• SO - Wait for CSS to load before JS in React [FOUC]
  This reference looks like something that we are talking about. But I don't know how to implement it in vite.
• SO - Dynamic import vite css

But, since you import your CSS dynamically, there is no way to avoid FOUC. Because the CSS is loaded after JS and after the DOM loaded

Currently we're building with vite as js and css file, but I don't know enough configurations to work around it. vite - How to bundle as a single JS and a single CSS file

One hack to do is SO - Eliminate flash of unstyled content

<style>
  html {
    visibility: hidden;
    opacity: 0;
  }
</style>

Then, at the end of your last .css stylesheet file, set the visibility and opacity styles to 'visible' and '1', respectively:

html {
  visibility: visible;
  opacity: 1;
}

Dev Problems

VIVO Android viewport height is half

Some SO questions also face the same problem

• SO - Wrong window height on android when the HTML website is load
• SO - How do I get viewport height units to work in fullscreen mode in Chrome on Android?