Page Helpers
Read any content from the page you're writing on, like an order number, a job title, or the name of the person you're replying to, and insert it into your template.
CSS
The css helper points at a part of the page and inserts the text from there.
You describe the part you want with a CSS selector, the same shorthand web pages use to style themselves. You can point at a class (.price), an id (#total), a tag (h1), an attribute ([data-order-id]), or a combination of them (.order .price).
To find out what to use, right-click the text on the page and choose Inspect, then look for the class or id on the highlighted element. If the selector isn't valid, the template shows an error instead of inserting content.
Here are a few examples of how you can use it. In each one, the Page section is a small sample of a website, standing in for the page you'd be writing on. Change the page or the template, and the Preview shows what would be inserted.
Insert text from the page
The page is read when you insert the template, so you always get what's on it at that moment, and the content is always inserted as plain text. Spaces and line breaks around the text are removed, and when nothing matches, nothing is inserted.
When the text you point at is shown on more than one line, like an address, the lines can end up joined together, without a space between them. Point at each line on its own, and put them back together the way you want.
Each line on its own:
Some sites build parts of their page inside a shadow DOM. Briskine finds those elements too, as long as your selector points straight at the element you want (.inner), rather than reaching down to it from a parent (.host > .inner).
Insert an attribute
Elements can carry extra information in attributes, like the address a link points to. Add the attribute name as the second parameter to insert that instead of the text.
If the element doesn't have that attribute, nothing is inserted.
Insert all the matches
When a selector matches more than one element, {{css}} inserts the first one.
Use the each helper to loop through all of them.
To put every match on one line, join them with the list helper.
Looping works with an attribute too.
Inside the loop, every match also carries its attributes, which you can read by name.
Insert the value of a form field
Text boxes have a value, which is whatever is typed in them at the moment. Read it with lookup.
Inside a loop, use {{value}}.
{{css "input" "value"}} looks at the value attribute, which is the value the field started with when the page loaded. Once something has been typed into the field, the lookup version above gives you what's in it now, while the attribute still gives you the value it started with.
Insert checked checkboxes and radio buttons
A checkbox keeps the same value when you check or uncheck it, so its value doesn't tell you which ones are checked. Add :checked to the selector to match only those.
In a group of radio buttons, it matches the one that's checked.
The value is often a short code, like pro. To insert the label next to it instead, point at the label that has a checked input inside.
Insert the selected option of a dropdown
A dropdown's value is the value of the selected option, which is often a code rather than the text you see. Add option:checked to the selector to insert the text of the selected option instead.
Country:
When no option is marked as selected, the first one is, the same way the dropdown shows it.
In these examples, move the checked or selected attribute in the Page section to change the result. On a real page, you get whatever is checked or selected at the moment you insert the template.
Insert content only when it's on the page
{{css}} is empty when nothing matched, so you can check for it with the if helper.
Combine it with other helpers
You can use the text you read from the page with the text helpers.
A date on the page can be reformatted with the date and time helper.
This works inside a loop too.
Use it as a cursor placeholder
Read the text into a cursor placeholder, so it's selected after you insert the template and you can replace it by typing.