Modifying website element styles based on user interaction
In some implementations, a style engine may receive, using a first code snippet included in a website, an indication of a first user action. The style engine may transmit an instruction to modify a first style, associated with a first element on the website, based on the indication of the first user action. The instruction to modify the first style may be omitted from code comprising the website. The style engine may receive, using a second code snippet included in the website, an indication of a second user action. The style engine may transmit an instruction to modify a second style, associated with a second element on the website, based on the indication of the second user action. The instruction to modify the second style may be omitted from the code comprising the website.
1 . A system for automatically modifying website element styles, the system comprising:
one or more memories; and
one or more processors, coupled to the one or more memories, configured to:
receive, from a user device and at a style engine that is remote from the user device and remote from a website host of a website, an indication of a first user action using a first code snippet included in the website;
transmit, from the style engine to the user device, an instruction to modify a first style, associated with a first element on the website, based on the indication of the first user action,
wherein the instruction to modify the first style comprises an indication of a new cascading style sheet (CSS) selector to replace an old CSS selector;
receive, from the user device and at the style engine, an indication of a second user action using a second code snippet included in the website;
transmit, from the style engine to the user device, an instruction to modify a second style, associated with a second element on the website, based on the indication of the second user action;
identify the first user action as belonging to a first set of user actions associated with a data structure;
identify the second user action as belonging to a second set of user actions associated with a machine learning model;
use the data structure in connection with the first user action;
apply the machine learning model to generate a recommended modification to the second style based on the indication of the second user action; and
transmit an instruction to modify a portion of the website based on output from the machine learning model.
2 . The system of claim 1 , wherein the one or more processors are configured to:
receive an indication that a user has returned to the website,
wherein the instruction to modify the portion of the website is transmitted in response to the indication that the user has returned.
3 . The system of claim 1 , wherein the first element comprises a hyperlink, a button, a text box, or an image.
4 . The system of claim 1 , wherein the second element comprises text.
5 . The system of claim 1 , wherein the first user action comprises scrolling or hovering.
6 . The system of claim 1 , wherein the second user action comprises viewing.
7 . The system of claim 1 , wherein the one or more processors are further configured to:
receive an indication that a user of the user device has left the website;
determine a style to apply when the user returns to the website;
receive an indication that the user has returned to the website; and
transmit, to the user device, an instruction to modify a portion of the website in accordance with the determined style and based on the indication that the user has returned to the website.
8 . The system of claim 1 , wherein the data structure comprises a table mapping user actions to instructions to modify styles.
9 . A method of automatically modifying website element styles, comprising:
receiving, from a user device and at a style engine that is remote from the user device and remote from a website host of a website, an indication of a first user action using a first code snippet included in the website;
transmitting, from the style engine to the user device, an instruction to modify a first style, associated with a first element on the website, based on the indication of the first user action,
wherein the instruction to modify the first style comprises an indication of a new cascading style sheet (CSS) selector to replace an old CSS selector;
receiving, from the user device and at the style engine, an indication of a second user action using a second code snippet included in the website;
transmitting, from the style engine to the user device, an instruction to modify a second style, associated with a second element on the website, based on the indication of the second user action;
identifying the first user action as associated with a data structure and the second user action as associated with a machine learning model;
applying the machine learning model to the second user action to generate a recommended modification to the second style; and
transmitting, from the style engine to the user device, an instruction to modify the second style based on the recommended modification generated by the machine learning model.
10 . The method of claim 9 , wherein the first code snippet comprises executable code that calls an application programming interface (API) function to report user actions.
11 . The method of claim 10 , wherein code comprising the website includes an indication of the API function.
12 . The method of claim 9 , wherein the data structure comprises a table mapping the first user action to the instruction to modify the first style.
13 . The method of claim 9 , further comprising:
applying the machine learning model to the indication of the second user action,
wherein the instruction to modify the second style is determined based on output from the machine learning model.
14 . The method of claim 9 , further comprising:
storing the indication of the first user action and the indication of the second user action remotely from the user device.
15 . The method of claim 9 , wherein:
the first code snippet is associated with a first set of user actions, associated with a first set of application programming interfaces (APIs), that are queried against the data structure that associates user actions with instructions to modify styles, and
the second code snippet is associated with a second set of user actions, associated with a second set of APIs, that are input to the machine learning model.
16 . A non-transitory computer-readable medium storing a set of instructions for automatically modifying website element styles, the set of instructions comprising:
one or more instructions that, when executed by one or more processors of a device, cause the device to:
receive, from a user device and at a style engine that is remote from the user device and remote from a website host of a website, an indication of a first user action using a first code snippet included in the website;
receive, from the user device and at the style engine, an indication of a second user action using a second code snippet included in the website;
identify the first user action as associated with a data structure and the second user action as associated with a machine learning model;
use the data structure to determine a modification to a first style in connection with the first user action;
apply the machine learning model to determine a modification to a second style based on the indication of the second user action;
generate, based on output from the data structure and the machine learning model, an instruction to perform a modification to the website, the modification to the website including the modification to the first style and the modification to the second style,
wherein the instruction to perform the modification comprises an indication of a new cascading style sheet (CSS) selector to replace an old CSS selector; and
transmit, to the user device and from the style engine, the instruction to perform the modification to the website.
17 . The non-transitory computer-readable medium of claim 16 , wherein the one or more instructions, when executed by the one or more processors, further cause the device to:
receive an indication that a user has returned to the website,
wherein the instruction to perform the modification is transmitted in response to the indication that the user has returned.
18 . The non-transitory computer-readable medium of claim 16 , wherein the one or more instructions, that cause the device to receive the indication of the first user action, cause the device to:
receive an application programming interface (API) call, wherein the indication of the first user action is an argument to the API call.
19 . The non-transitory computer-readable medium of claim 16 , wherein the one or more instructions, when executed by the one or more processors, further cause the device to:
refrain from providing a third-party server access to the indication of the first user action and the indication of the second user action.
20 . The non-transitory computer-readable medium of claim 16 , wherein the first code snippet comprises executable code included in a hypertext markup language file of the website.