Fouita code editor
Although you can clone, use, and customize widgets inside your website without having to access the code base, having the ability to update the code or build a widget from scratch will give you endless possibilities to:
- Handle how the widget design should look like, pixel perfect
- Manage the behavior of the component
- Make custom API calls to your backend
- Customize tracking attributes and metrics using fouita utilities functions
- Add custom triggers and control the flow from outside the code
- Add custom editable elements and manage the edit mode using a WYSWYG
This editor is perfect if you can code and understand:
- HTML: basic html writing skills
- CSS: basic css concepts, we use tailwindcss
inside the editor, checkout the documentation there before getting started
Note: if you are not a coder, you might risk breaking things in your website, you need to make sure you understand what you're doing before building or editing widgets, otherwise you need to hire a developer to handle this for you.
Building your first widget
When clicking on "Create new widget" from the sidebar of widgets list
We can see the editor open with basic code to demonstrate how the code would look like.
Anything you write in the editor will be instantaniously previewed, in the preview section.
1 - Svelte and Tailwindcss basics
You can find svelte and js files under the sidenav of the editor.
The following is a basic code that calls an external js file inside svelte component
The file App.svelte is where your widget will live, other files are only dependecies that will be used.
You can create as much svelte and js files as you like and link them in the way that you see fit.
The code editor also can be available in dark mode, you just need to use the "moon" icon in the control panel at the bottom right.
You will also notice a second moon icon on the editor, this one is for testing how your widget would look in the dark mode.
You will notice that we might need to change the text color on dark mode, thankfully tailwindcss makes it easy for us to use the dark: utility class.
2 - Icons
You might notice the ICON label in the sidenav, icons can be no more than svelte components with svg content.
Although you can write icons from scratch using a predefined SVG code and import it manually in different svelte components for usage, Fouita offers a simpler and better way to make it easy for you to import and use icons.
All you need is to search for the icon in the right panel, where you usually search for widgets.
Keep your editor open then click on icon search then type your keyword and hit enter.
You should see different kinds of icons, you can hover over what you like and import it to your widget code.
When you click on select the icon will be added under the icons section and imported automatically in the App.svelte file. You just have to use it in the right place.
3 - Reload last edit
When you are editing your code and for some reason needed to reload the page, you don't have to worry, you can always get back to last widget you were editing by clicking on reload last edit.
4 - Save your widget
After finishing creating you widget and you test it well on the preview mode. It's time to save it. You can hit next on top and add the name, screenshot and keywords for your widget.
After hitting next, you should see this interface
The editor will try to take a screenshot of your widget, but it does not go well with images and icons, so you might want to click back and take a screenshot then hit CTRL+V to update the image you like to be displayed for your widget.
Then you click save to create your widget. Once the widget is created it will be accessible inside the widgets list.
Now you can add it to any page you like and see how it can be displyed.
5 - Editing and Creating a new version
When we click on the pencil icon we will be able to update the code of the widget we created.
We will notice the editor is a bit different now, it shows more options.
We can click Force update if we like to update the widget, but we can also hit next to create a new version of that widget.
There is many reasons we would like to create multiple versions:
1 - Use different integrations for the same widget
2- Use different structure adding or removing some items
3- Create a draft and try to test some features inside the page
4- Any reason you think you might need to get back to the old widget
Once we click next the same interface will appear from before.
We can choose the old screenshot or take a new one for the new widget.
When we click save we will see our widgets grouped. and we can access different versions of them by clicking on it.
That's it we have created two versions of a widget.
Next we will take a look how to create the edit mode and be able to update the text, picture and icons from the page directly without needing to change the code.