Create your own HTML widgets using our new custom element

We are happy to announce the release of our new custom widget that allows creating limitless implementations!

Using our new updatefy-custom-widget element you’re allowed to go crazy and define your own HTML structure for your widget! That’s not all, we allow to use vue.js on it, so you can take your widget to the next level!

Now you can use your Google Sheet as your API and create powerful widgets directly in the browser using our JavaScript solution.

In the next example, we’re going to use this Google Sheet as a database.

1) Create Updatefy widget

In order to use our new custom widget, you need to get a Updatefy widget UUID, so please head to (our site)[https://updatefy.co] and create a widget from your spreadsheet.

2) Set-up your custom HTML

Once you have the widget uuid you can start using the data coming from the Google Sheet to create your widget:

<updatefy-custom-widget widget-uuid="7a9e7994-5efa-4cdd-a7e4-e7b3b79bbc5a">
  <div class="show-when-ready">
    <div class="column" v-for="post in data" :key="post.key">
      <!-- Post-->
      <div class="post-module">
        <!-- Thumbnail-->
        <div class="thumbnail">
          ...
          <img v-bind:src="post.image"/>
        </div>
        <!-- Post Content-->
        <div class="post-content">
          <div class="category"></div>
          <h1 class="title"></h1>
          ...
        </div>
      </div>
    </div>
  </div>
</updatefy-custom-widget>

As you can see in the code above, the HTML receives a data property with all the information from the spreadsheet, so using v-for from vue.js we can iterate over that and display all the posts.

We recommend to add show-when-ready class with display: none by default, so the code will only be visible when we process all the information

3) Live preview

Here you can see the final version of the widget!

Thanks for reading!

We’re looking forward to hear your thoughts, feel free to leave us a comment or reach out to us on Twitter!