Component prototype
Ask Vari and the customer response are separate custom elements, coordinated directly by this page.
Sign in to ask Vari about City Food Hall menus.
Your embed identifiers
Only published menus are available to the public AI widget. The selected IDs are shown below and update every snippet.
Use it elsewhere
Each snippet installs vari-ai-chat and vari-ai-response independently. Put them anywhere on the same page, keep the chat’s response-for equal to the response element’s id, and the chat writes directly to that component; every option uses published menu data only.
Search exactly one menu. This remains supported for existing integrations.
<vari-ai-chat menu-id="YOUR_MENU_ID" response-for="vari-ai-response"></vari-ai-chat>
<vari-ai-response id="vari-ai-response"></vari-ai-response>
<script src="https://varimenu.web.app/open-ai-web-components/vari-ai-response.js" defer></script>
<script src="https://varimenu.web.app/open-ai-web-components/vari-ai-chat.js" defer></script>Search every published menu in the company.
<vari-ai-chat company-id="YOUR_COMPANY_ID" response-for="vari-ai-response"></vari-ai-chat>
<vari-ai-response id="vari-ai-response"></vari-ai-response>
<script src="https://varimenu.web.app/open-ai-web-components/vari-ai-response.js" defer></script>
<script src="https://varimenu.web.app/open-ai-web-components/vari-ai-chat.js" defer></script>Keep the company boundary while limiting recommendations to one menu. Add comma-separated IDs to menu-ids for a group.
<vari-ai-chat company-id="YOUR_COMPANY_ID" menu-ids="YOUR_MENU_ID" response-for="vari-ai-response"></vari-ai-chat>
<vari-ai-response id="vari-ai-response"></vari-ai-response>
<script src="https://varimenu.web.app/open-ai-web-components/vari-ai-response.js" defer></script>
<script src="https://varimenu.web.app/open-ai-web-components/vari-ai-chat.js" defer></script>