Wized Docs

Appearance

Initial Configuration ​

First Steps ​

Set up your first project in Wized and start adding advanced functionality and custom logic to your website:

  1. Create your account on Wized:

    • Go to Wized and create a free account.

  2. Create your first project:

    • Once inside the Wized dashboard, click on the "New Project" button.

  3. Connect your project to Webflow:

    • Staging URL: Paste the URL of your Webflow development site (webflow.io).
    • Project Name: Choose a unique and descriptive name to identify your project in your workspace.
    • Wized Script:
      • Copy the script provided by Wized and paste it into the custom code <head> section of your Webflow project.
      • Ensure there are no conflicting scripts already present in the head section.
      • In Webflow, go to the Website Settings panel.
      • Look for the "Custom Code" section.
      • Paste the Wized script into the <head> section.
      • Save changes and publish your site.
      • Now, you’re ready! Click the “Create” button to finalize your project.

  4. View your site in the Wized configurator:

    • You will now see an exact replica of your website inside the Wized configurator. This interactive version allows you to experiment and add features in real-time!

  5. Connecting Elements:

    • Wized recognizes all elements on your Webflow site. To enable interactivity for specific elements, you must establish a connection between those elements and Wized.

    • Add the wized attribute:

      • In Webflow, go to the settings of the element you want to connect to Wized.
      • Find the "Custom Attributes" section and add a new attribute.
      • The key must be wized and the value will be the name you will use to identify this element in Wized (for example, myButton, myForm, etc.).
      • Save your changes and republish your site. You should now be able to see this element in the Wized Elements panel and start adding functionality to it!