Introducing Widgets

Enhance your websites with these awesome widgets

Anima App's medium blog
Design + Sketch
4 min readMay 25, 2017

--

Anima allows designers to create high-fidelity prototypes right inside Sketch, Adobe XD, and Figma and export HTML & CSS in a single click.

Article Overview

  • 📣 Announcement
  • ⚛️ Widgets List
  • 💎 In Sketch Rendering
  • 💁 Demos
  • 💪 Examples
  • ☝️ How to

📣 Announcement

On our mission to empower designers, we are continuously pushing the envelope on what designers can achieve without writing a single line of code.

The web is an ecosystem where websites live in. Many companies that develop web products, offer ways to integrate their products or services in other websites.

Often times these come in a form of an easily customizable snippet of code that is generated automatically per user preferences. Once embedded in a website, these snippets of code offer new functionality.

With the amount of companies out there offering embeddable snippets, the possibilities are endless.

We call these snippets for extending websites capabilities “Widgets”.

Today we are happy to announce that Launchpad websites support a variety of Widgets. We are also introducing an easy way to discover and embed widgets with our new Widget Market

⚛️ Widgets List

Widgets can perform different functions from a variety of categories:

  • Gumroad — Add E-Commerce and sell stuff.
  • Crisp.im — Live chat for your website
  • User or Stakeholders Feedback — Great for iterating on your design
  • Analytics — Google Analytics/Mixpanel/Statcounter
  • Restaurants table ordering — With Open Table
  • Social media feed by Juicer.io — Display a feed of your social media
  • Marketing — HubSpot, Marketo — Track your leads
  • And much more

On top of that, we will be constantly adding more Widgets that will extend the feature set for websites you can build with Launchpad.

💎 In Sketch Rendering

When adding a widget that includes user interface, Launchpad will render it and place a snapshot in your Sketch design to make it easy to see how the widget blends in with the rest of the design.

Adding a Google Map widget renders it right inside Sketch

💁 Demos

Live demos for various widgets — https://launchpad.animaapp.com/widgetsdemo

💪 Examples

Adding a widget is easy as Copy Pasting a ready-made snippet.

💬 Chat

Here is how we added Live Chat to our website in under a minute:

How we added Live Chat in our Launchpad website in under a minute — no coding needed. — https://www.youtube.com/watch?v=R2y915B_VAA

📸 Usersnap

Gather feedback on your design.

Comment on our Launchpad website:

https://launchpad.animaapp.com/usersnapdemo

Try it live: https://launchpad.animaapp.com/usersnapdemo

📍 Google Map

How to add a live Google Map to your website in under a minute:

How to add a live map to your website in under a minute — no coding needed.

☝️ How to

To add a widget simply copy its snippet from its website and paste into Launchpad:

Click ••• and then Widgets
Select a widget on the left
Follow the instructions on where to get the snippet and paste the snippet

Widgets can be added in 3 different levels:

  • Selected Layer
  • Selected Artboards (Webpages)
  • Website

Widgets like Chat, Marketing tracking, and similar should be added to the whole website while widgets like Google Maps, Gumroad purchase form should be added to a layer.

As a general rule, if the widget can be positioned in the page, it should be added to a layer rather than the artboard or whole website.

For designers that care about marketing, measuring and customer success — Launchpad is the perfect tool for the job.

Suggest a widget: widgets@animaapp.com

--

--