Sites

A site is a web application your operators work in, such as a help desk or a webmail. It lists the application's addresses and its screens. Each screen says where the extension finds the text to read and, if you want sends checked, which button sends it. A review then runs prisms on one screen of a site.

You manage sites under Browser, Sites in the app. Only admins see this page.

Add a site

Choose Add site. You can start from a built-in site or build your own with Custom.

Built-in sites

The built-in sites are Gmail, Outlook on the web, Talkt and Prismlet demo helpdesk. Prismlet keeps their screens and selectors up to date. When one of these applications changes its page, Prismlet ships the fix and every account that uses the site gets it. You only choose the addresses.

Site	Screens	Addresses
Gmail	Compose, Open email, Inbox	One fixed address
Outlook on the web	Compose	Four addresses, all ticked to start with
Talkt	Reply composer, Interaction log	app.talkt.com and eu.talkt.com, both ticked to start with
Prismlet demo helpdesk	Ticket	One fixed address

The editor shows each built-in screen with its path, work area, elements and Send button, so you can see what the extension reads. Outlook on the web finds the message body and the Send button by their English labels, so for Outlook in another language you need a custom site.

The Prismlet demo helpdesk is a made-up support desk at prismlet.com/demo/helpdesk/. Use it to try the extension before you set up your own application.

Custom sites

Custom is for any other web application. You give the site a Site name, its addresses, and one to ten screens. Each screen needs CSS selectors, which the next sections explain.

Addresses

A site has one to ten addresses. An address is the exact start of the application's URL: the scheme and host, with no path and no trailing slash, such as https://support.example.com. List one per line under Site addresses, one per line. Use more than one when the same application answers on several hosts, such as a regional copy.

The extension only works on a page whose address is one of these. The extension from the Chrome Web Store shows the Check button and guards Send only on https addresses.

Selectors

A CSS selector is a short pattern that picks elements out of a web page. The same patterns style pages in CSS. You find them with your browser's developer tools: right-click the element, choose Inspect, and look at its tag, id, class and other attributes.

• textarea picks every <textarea>.
• #reply picks the element with id="reply".
• .reply-box picks elements with class="reply-box".
• button[type="submit"] picks buttons whose type attribute is submit.
• .reply-box textarea picks a <textarea> anywhere inside an element with class reply-box.

Say your help desk's reply form looks like this:

<section class="reply-box">
  <textarea name="reply"></textarea>
  <button type="submit" class="send">Send</button>
</section>

The screen's work area is section.reply-box, the element to read is textarea[name="reply"] with Read set to Input or textarea value, and the Send button is button.send.

Prefer attributes the application is unlikely to change, such as name, id, role or aria-label. Generated class names like css-1x2y3z often change with each release of the application. The editor checks that every selector is valid CSS when you save, but it cannot check that the selector matches your pages. Open the page and check it in the panel.

Screens

A screen is one kind of place on the site, such as a reply composer or an open ticket. A site has one to ten screens. Each has:

• Screen name, which operators and reviews see, such as Reply composer.
• Screen key, a short id of letters, numbers and underscores that starts with a letter. Reviews refer to the screen by its key.
• Page path prefix, which starts with /. The screen applies on pages whose path starts with it, such as /tickets/. Use / to match every page.
• Work area CSS selector, which matches the part of the page that holds one piece of work, such as one reply form. Each match is its own work area. Gmail, for one, matches every open compose window separately, and the operator checks each on its own.

Elements to read

Under Elements to read, list the text or images the extension captures in each work area. A screen has one to 20 elements. Each has a Label, an Element key and a CSS selector within the work area. The selector is looked up inside the work area, not across the whole page.

Read says what to take from the element:

• Input or textarea value reads what is typed in an <input> or <textarea>. Use it for those two, since Visible text / rich text editor fails on them.
• Visible text / rich text editor reads the text the page shows. It also reads the body of a frame from the same site inside the element, which is how rich text editors such as TinyMCE store a draft.
• Image (img element) reads one <img> and sends the picture, resized to 2048 pixels on the long side. The image must load from the application's own address, or from a host that allows other sites to read it. A prism needs an image field to read it, and the account's model must read images. See Fields.

The extension cannot read frames from another site, editors inside a shadow root, PDF text, or text inside images.

Every element must hold something. An element that is missing or empty fails the capture, and nothing is sent to Prismlet. Each text element reads up to 20,000 characters, and text over the limit fails the same way. Built-in sites set lower limits on short elements, such as 1,000 characters for a Gmail subject. A built-in element that holds a growing log, such as Talkt's conversation, keeps the most recent text instead. It reads the newest whole lines that fit and starts with [earlier messages omitted]. Drafts never do this. The site editor does not set limits, so every element of a custom site reads up to 20,000 characters.

Send button

Send button is optional. Fill it in when a review on this screen should check the text before it is sent. The send guard explains what happens then.

• Send button CSS selector matches the button that sends. The extension uses the match nearest the work area: inside it first, then around it. A Send button often sits outside the text box it sends.
• Keys that also send lists the shortcuts that send from inside the work area: Enter, Ctrl+Enter and Cmd+Enter. Tick the ones the application uses.

Leave the selector empty on screens that only show answers, such as an inbox or an interaction log.

Customize selectors

A built-in site follows Prismlet's selectors until you choose Customize selectors. That copies the current screens into the site, and from then on you edit them like a custom site. The site no longer gets Prismlet's fixes. Customize only when your copy of the application differs, such as Outlook in another language.

Unverified sites

A built-in site whose selectors have not yet been tested on the live application carries an Unverified note on its card and in the editor. Its selectors may miss on your pages. Open the application with the extension and check that each screen captures the right text before you rely on its send guard.

Saving a site

Choose Save site. Saving changes every review on the site, even when you changed only an address. Operators' browsers fetch the reviews again before their next check. A capture taken with the old selectors cannot run, so the operator captures again.

A save is refused when it would drop a screen or an element that a review reads, because that review could no longer capture its text. The error starts with Change the review first and names the review and the element. Change that review first, then save the site.

Delete a site

Delete in the sites list removes a site that no review runs on. A site that any review runs on, active or disabled, cannot be deleted. Move those reviews to another site first: open each review and pick another Site.