Create your first widget

1. Creating the widget: The first step is to add a custom script widget to your wheel. Find it in the left column and drag it to your wheel.
   
   
   
   
   
2. Open the script editor: Select your widget from the wheel and click the edit button in the right column
   
   
   
   
   
3. Start from a template: You can choose from existing templates or start from a blank slate. In this example, we will start from the template called Door 1
   
   
   
   
4. Configure your new script settings: Those are the basics settings for your widget.
   
   
• Script name: This is the name of the script. It is used for searches and general UI elements refering to this script.
• Script label/icon: The short label/icon that will show on the wheel tile and in the Otto search results alongside the script name. Can be overridden by the "state()" base function.
• Category name: The category under which this script will show if it is added to the Toolbox or exported.
• Reference name: The reference name is optional and can be used when configuring another script to run this one.
• Description: This is the description that will appear in the right column of the wheel editor.
• Can be found using Otto search bar: This allows this widget to be found when using Otto. The script name is what the system will use to find your widget.
• Reset script storage: Resets any data persisted by the widget.
• Copy to Toolbox: This will create a copy of your widget in the Toolbox so it can be added to your wheel later without exporting it to your Community folder. Widgets saved to the Toolbox will show in the wheel editor sidebar.
• Working Directory: Create a folder on your PC containing "code.css", "code.html" and "code.js" files and see the results in Flow right after hitting save. Paste the path to that directory in the text field to enable. The synchronization only works when the editor window is open.
  
  
5. Start Coding!
   
   
• Base functions: Listed here are functions that can be used to execute code at specific times or when an event triggers it. 
• APIs: Listed here are snippets of code that can be used to do things within (or outside of) base functions.
• Save: The save button saves the current widget but doesn't execute it. If too much of the code has changed, you will be asked to confirm. This prevents errors during copy-paste operations.
• Compile: The compile button saves and compiles the widget.
• Run: This will execute the code inside of the run() function. This is equivalent to a user clicking the tile in the Wheel.

Next, Importing/Sharing Scripts ⟶