# US 12,216,731 B2 · Controlling views of a website on a browser > Agents: this data is available as JSON from the patentgrep API and MCP server — see https://patentgrep.com/llms.txt - Number: US 12,216,731 B2 - Document ID: US12216731B2 - Status: Granted - Kind: B2 - Application number: 18/128,540 - Filed: 2023-03-30 - Published: 2024-10-03 - Granted: 2025-02-04 - Earliest claimed: 2023-03-30 - Assignees: Klaviyo, Inc - Applicants: Klaviyo, Inc - Inventors: Noah Mormino; Jonathan Darby; Bjorn Mann - Web page: https://patentgrep.com/patent/US12216731B2 ## CPC - G06F 16/986: {Document structures and storage, e.g. HTML extensions} - G06F: ELECTRIC DIGITAL DATA PROCESSING (computer systems based on specific computational models G06N) ## Abstract Apparatuses, methods, and systems for controlling views of a website. One method includes generating selected variant data including data of the A view and data of the B view, providing the selected variant data including data of an A view or data of a B view to a state management library, generating, by the state management library, a UI (user interface) of a website based on the data of the A view data or the data of the B provided to the state management library, controlling displaying underlying data of a website view on a user browser based on the UI generated by the state management library, wherein the website view is generated by a front-end framework, wherein the front-end framework provides input to a website DOM which controls the website view on the user browser, and manipulating views of the website with the front-end framework based on the selected variant data. ## Claims ### Claim 1 A method of displaying an A view and a B view on a single page application comprising: generating, by a server, selected variant data including data of the A view and data of the B view; downloading a state management library and a variant selector to user browsers of each of a plurality of computing devices that access a website, wherein the state management library and the variant selector operate on each user browser of each of the plurality of computing devices after being downloaded; downloading, to each web browser of each of the plurality of computing devices, a payload of all possible variants including data of the A view and data of the B view at times a web page is loaded to each web browser of each of the plurality of computing devices from the server; selecting, by each variant selector of each of web browsers, downloaded data of the A view or downloaded data of the B view based on at least on a configured language of a computing device of each web browser; providing the selected variant data, by the variant selector of each of the web browsers, including the data of the A view or the data of the B view to the state management library of each of the web browsers, wherein each variant selector obtains a corresponding downloaded and selected data of the A view or downloaded and selected data of the B view and overwrites data for a page in each state management library with the downloaded and selected data of the A view or the downloaded and selected data of the B view, thereby re-rendering by the page with the corresponding downloaded and selected data of the A view or the downloaded and selected data of the B view, wherein the corresponding downloaded and selected data of the A view or the downloaded and selected data of the B view for each of the web browsers is independent of the corresponding downloaded and selected data of the A view or the downloaded and selected data of the B view for each other of the web browsers; generating, by the state management library, a UI (user interface) of the website based on the downloaded and selected data of the A view or the downloaded and selected data of the B selected by the variant selector and provided to the state management library; controlling displaying, by a website DOM (document object model), underlying data of a website view on each user browser based on the UI generated by the state management library; wherein the website view is generated by a front-end framework, wherein the front-end framework provides input to the website DOM which controls the website view on the user browser, wherein the state management library provides either the downloaded and selected data of the A view or the downloaded and selected data of the B view to the front-end framework as selected by the variant selector; and manipulating views of the website with the front-end framework based on the selected variant data. ### Claim 2 (depends on 1) The method of claim 1, wherein the A view is a control view, and the B view is a variant view. ### Claim 3 (depends on 1) The method of claim 1, wherein the state management library manipulates a data layer of the front-end framework, thereby triggering a re-rendering using the selected variant data. ### Claim 4 (depends on 1) The method of claim 1, wherein the state manager library is configured to hold view data for a given view, wherein the state management library only contains a single instance of the A view or the B view for the page as selected by the variant selector. ### Claim 5 (depends on 1) The method of claim 1, wherein the A view and the B view are linked to create a consistent relationship between a data set of the A view and a dataset of the B view. ### Claim 6 (depends on 5) The method of claim 5, wherein the consistent relationship comprises durable across user sessions, wherein a user is exposed to either the A view A data or the B view from a same set of data options. ### Claim 7 (depends on 1) The method of claim 1, wherein the variant selector comprises a function, or set of functions, which can accept a variant as an argument and updates the state management library for a given page with corresponding view data including the A view data or the B view data. ### Claim 8 (depends on 1) The method of claim 1, wherein a one of the variants is selected based on characteristics of a computing device of the user browser. ### Claim 9 (depends on 8) The method of claim 8, wherein the characteristics include a computing device location, an IP address, a screen size or resolution, and the configured language. ### Claim 10 A system of displaying an A view and a B view on a single page application of a computing device, comprising: a plurality of computing devices including the computing device; a server connected through a network to the plurality of computing devices; the server configured to: generate selected variant data including data of the A view and data of the B view; download a state management library and a variant selector to user browsers of each of a plurality of computing devices that access a website, wherein the state management library and the variant selector operate on each user browser of each of the plurality of computing devices after being downloaded; download to each web browser of each of the plurality of computing devices, a payload of all possible variants including data of the A view and data of the B view at times a web page is loaded to each web browser of each of the plurality of computing devices from the server; the computing device configured to: select by the variant selector of the web browsers of the computing device downloaded data of the A view or downloaded data of the B view based on at least on a configured language of the computing device; provide the selected variant data, by the variant selector of the web browser of the computing device, including the data of the A view or the data of the B view to the state management library of the web browser of the computing device, wherein each variant selector obtains a corresponding downloaded and selected data of the A view or downloaded and selected data of the B view and overwrites data for a page in each state management library with the downloaded and selected data of the A view or the downloaded and selected data of the B view, thereby re-rendering by the page with the corresponding downloaded and selected data of the A view or the downloaded and selected data of the B view, wherein the corresponding downloaded and selected data of the A view or the downloaded and selected data of the B view for each of the web browsers is independent of the corresponding downloaded and selected data of the A view or the downloaded and selected data of the B view for each other of the web browsers; generate by the state management library a UI (user interface) of the website based on the downloaded and selected data of the A view data or the downloaded and selected data of the B selected by the variant selector and provided to the state management library; control displaying, by a website DOM (document object model) of the computing device, underlying data of a website view on each user browser based on the UI generated by the state management library; wherein the website view is generated by a front-end framework, wherein the front-end framework provides input to the website DOM which controls the website view on the user browser, wherein the state management library provides either the downloaded and selected data of the A view or of the downloaded and selected data of the B view to the front-end framework as selected by the variant selector; and manipulate views of the website with the front-end framework based on the selected variant data. ### Claim 11 (depends on 10) The system of claim 10, wherein the A view is a control view, and the B view is a variant view. ### Claim 12 (depends on 10) The system of claim 10, wherein the state management library manipulates a data layer of the front-end framework, thereby triggering a re-rendering using the selected variant data. ### Claim 13 (depends on 10) The system of claim 10, wherein the A view and the B view are linked to create a consistent relationship between a data set of the A view and a dataset of the B view, wherein a user is exposed to either the A view or the B view from a same set of data options, and wherein the state management library only contains a single instance of the A view or the B view for the page as selected by the variant selector. ### Claim 14 (depends on 10) The system of claim 10, wherein the variant selector comprises a function, or set of functions, which can accept a variant as an argument and updates the state management library for a given page with corresponding view data (A view data or B view data). ### Claim 15 (depends on 10) The system of claim 10, wherein a one of the variants is selected based on characteristics an IP address a computing device of the user browser.