\n Glancer | A Glance cobrowse demo for\n {\" \"}\n {props.Name.title[0].text.content}\n

\n\n

\n {/* main content area */}\n

\n Pick a demo\n

\n\n {/* PICKER */}\n

\n \n 👻 iframe\n

\n \n ⚡️ PDF\n

\n \n 𝍔 Form\n

\n \n 🛒 Checkout\n

\n \n\n

\n \n

👻 iframe

\n While you can certainly play this game alone, with Glance cobrowse you can work with your Glance\n agent to clear the levels.\n

\n To see that in action, ask your agent to take over with Glance's{\" \"}\n Remote Assist, and then click \"Yes\" when prompted in the cobrowsing session.\n

\n {await WhackAGhostEmbedIframe()}\n

\n \n \n \n \n For developers\n \n\n \n

How to Use This Page

\n This page demonstrates a simple two-column layout with Tailwind CSS.\n

Tip about implementation
Tip about implementation
Tip about implementation
Tip about implementation
Link to documentation

\n This area of the page includes an iframe embed. Not only does the embedded iframe appear in the\n cobrowsing session, but also the agent can interact with the content inside it.\n

\n To see that in action, ask the agent to take over with Glance's{\" \"}\n Remote Assist, and then click \"Yes\" when prompted in the cobrowsing session.\n

\n \n \n

⚡️ PDF

\n Cobrowse with an agent to review PDFs together. Those PDFs can even be dynamic, the contents\n configured on the fly while you work.\n

\n {/* TODO: add a screenshot here */}\n \n Try the Glance PDF viewer ↗︎\n \n

\n \n \n \n \n For developers\n \n\n \n

How to Use This Page

\n This page demonstrates a simple two-column layout with Tailwind CSS.\n

Tip about implementation
Tip about implementation
Tip about implementation
Tip about implementation
Link to documentation

\n \n \n \n

𝍔 Form

\n {await finance.financeForm()}\n

\n \n \n \n \n For developers\n \n\n \n

How to Use This Page

\n This page demonstrates a simple two-column layout with Tailwind CSS.\n

Tip about implementation
Tip about implementation
Tip about implementation
Tip about implementation
Link to documentation

\n \n \n \n

🛒 Checkout

\n {await checkout.StripeCheckoutForm()}\n

\n \n \n \n \n For developers\n \n\n \n

How to Use This Page

\n This page demonstrates a simple two-column layout with Tailwind CSS.\n

Tip about implementation
Tip about implementation
Tip about implementation
Tip about implementation
Link to documentation

\n \n \n \n \n\n

\n Ready to cobrowse?\n

\n\n {/* hide request CTA if cobrowsing is enabled */}\n \n

Cobrowsing is disabled due to inactivity

\n \n Request a session\n \n

\n \n

\n Thanks, an agent has been contacted and cobrowsing will be enabled shortly. Stay here.\n

\n\n {/* hide contact CTA if cobrowsing is enabled */}\n \n

Cobrowsing is enabled

\n\n

Step 1: Call your agent

\n {agent.name}\n
\n {agent.phone}\n

Step 2: Cobrowse

\n \n Start a cobrowse session\n \n

\n \n \n \n \n \n \n {/* set the pageId on the window so that imported scripts can access it */}\n \n \n \n \n \n \n \n ,\n );\n});\n\n// visitor's page captures when a visitor clicks a cobrowse like\n// click stored in Notion\napp.post(\"/action\", async (c) => {\n const payload = await c.req.json();\n const pageId = payload?.id;\n const action = payload?.action;\n const date = new Date();\n\n console.log(\"record\");\n console.log(payload);\n\n // create a database page in the Notion metrics database\n // https://www.notion.so/bradnoble/1e0c200736c280d686b2f6d5dee15950?v=1e0c200736c28045aef4000c9d855817&pvs=4\n const record = await notion.pages.create({\n parent: {\n database_id: \"1e0c200736c280d686b2f6d5dee15950\",\n },\n properties: {\n \"Name\": {\n title: [\n {\n type: \"text\",\n text: {\n content: action,\n },\n },\n ],\n },\n \"Date\": {\n date: {\n start: date,\n },\n },\n \"Related page id\": {\n \"rich_text\": [\n {\n \"type\": \"text\",\n \"text\": {\n \"content\": pageId,\n },\n },\n ],\n },\n \"Glancer demo\": {\n // this is a Notion relation and assigns this interaction\n // to this demo\n relation: [\n {\n id: pageId,\n },\n ],\n },\n // \"Action\": {\n // \"rich_text\": [\n // {\n // \"type\": \"text\",\n // \"text\": {\n // \"content\": action,\n // },\n // },\n // ],\n // },\n },\n });\n\n return c.json({\n ok: true,\n });\n});\n\n// Glancer admins hit this to create the visitor's cobrowse demo page\napp.post(\"/\", async (c) => {\n // Extract data from request\n const payload = await c.req.json();\n const pageId = await payload.data?.id;\n const url = c.req.url + \"/\" + pageId; // the GET at this endpoint will build the interface with data from tne Notion page at with id\n\n // Glancer admins will share this link with visitors\n await notion.pages.update({\n page_id: pageId,\n properties: {\n \"URL\": {\n \"url\": url, // set the unique URL for each client and save it to Notion\n },\n },\n });\n\n // option: save a blob for cache\n // to prevent val.town / Notion connectivity issues\n return c.json({\n ok: true,\n });\n});\n\n// does nothing\napp.get(\"/\", async (c) => {\n return c.html(``);\n});\n\nexport default app;","deleted","label",[176,158],"routes","permalink","https://www.val.town/x/bradnoble/Glancer/code/routes/glancer.tsx","extension","actionData","errors"]