By default, you have two variations, the Original which acts as the control, and the Variation where you will make your changes. You can easily add more variations by clicking Add variation or make a copy of a variation by clicking Duplicate. You can also rename the variations if you want. You perform all these actions by hovering the variation and then selecting the preferred action.
To start coding your project make sure you are on the correct variation and then click on Show code to open up the code editor.
If you do not wish to code your changes manually you can try out the WYSIWYG-editor. You can make simpler static changes with this. Remember to preview your changes and to set and test Audience so that the changes only happen on the page(s) you want. Also, remember to set and test Goals for the project before you activate it.
When you open the code editor you have two tabs where you write your javascript/jQuery and your CSS.
Javascript/jQuery
You can write your javascript/jQuery code just as you would in the console in the browser's dev tools. This code is executed at Document ready by default. If you experience "flickering" you can use our function for executing the code before Document ready.
CSS
The CSS is written as a standard CSS file and is added as an external CSS file in the head tag on the website. These changes will happen instantly as soon as the Symplify implementation script has loaded.
Remember to preview your changes and to set and test Audience so that the changes only happen on the page(s) you want. Also, remember to set and test Goals for the project before you activate it.
Recommended workflow
Our recommended workflow is having one tab open with the Editor where you make/code your changes and then also having a tab with the Preview open for this project. This way you can make/code your changes -> Save them and then just reload the Preview tab to see how this looks/works.
This way you do not have to reload the Editor (which takes a lot more time than the Preview) and you will see exactly how the changes will look when they are live later on.
This also has the benefit that you can easily use the browser's device simulator to check how the changes look on different devices.