This article walks you through designing and building your very first widget.
The widget builder is divided into three easy-to-understand sections: Build your Widget, Widget Details, and Review. Let's discuss each of these in turn:
1. Build your Widget
In the video, below, we show how quick it is to add a handful of components and test them out using the practice widget.
Your widget can support up to eleven unique components. These are:
Gecko Form - Pick key Gecko forms and share them with students and visitors to your website as a pop-up. Set up is as simple as picking a name and icon for the component and pasting in your Form webform link. Learn more here.
Gecko Event - Invite students and visitors to sign-up for important upcoming on-campus, virtual, or hybrid events. Pick a name and icon for the component and paste your Event Share webform link. Learn more here.
Gecko Chat - Signify your commitment to communicating with students by putting live-chat front and center. Assign incoming conversations to agents, teams, or chatbots. Choose a name and icon for your component and just paste in your live-chat channel account_id. Learn more here.
Web Link - Make your priority webpages a priority for your students and visitors. Display any webpage as either a newly opened tab or as a modal. Select a name and icon, give Gecko your URL and you're set. Learn more here.
3rd Party Widget - Integrate third-party communication tools into your widget. Currently supports Intercom, Unibuddy, and Ocelot. Pick a name and icon for your component, tell Gecko the third-party vendor you'd like to integrate with, and paste in your embed information. Learn more here.
Video - Share videos as a pop-up modal with your visitors that inform, educate and entertain. Gecko can easily embed videos from a range of host sources include YouTube, Vimeo, Wistia, and many more. Choose the name and icon for your widget, paste in your embed code and enjoy. Learn more here.
Once you're happy with how the widget is configured, you can demo it by using the practice widget located in the bottom right-hand corner of the widget builder:
Components that have been added to your widget can be re-ordered using the arrows on the right-hand side of the page or removed entirely by clicking the corresponding red trash-can icon.
When you're happy with the components on your widget, click Next Step > to move onto the next section.
2. Widget Details
Before we go any further, it's time to fine-tune the overall design of your widget:
Widget Name - What would you like your widget to be called? This name will only ever be displayed internally.
Widget Colour - What color would you like your widget to be? Add your hex colour in or click the colored square to manually choose a colour that works for you.
Widget Icon - Pick an icon for your widget to be displayed when the widget is closed.
Now your widget looks the part, click Next Steps > to move to the final section!
The review section will alert you to any required fields you may have missed when building your widget.
Once you're ready, click Save and Get Embed Code. This will save your widget and present you with your widget embed code, which can be used to embed your widget on any of your web pages. Your embed code will look something like this:
<script src="https://widget.geckoengage.com/embed" widgetId="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"></script>
To make the process of embedding your widget even easier, you can send a copy of the widget embed code directly to your IT/CMS team by entering their email address in the Send your widget setup instructions by email (optional) field.
Let's wrap things up by clicking the Finish Set Up button. Well done! You've built your very first widget!
In the next article, we'll talk about how to edit existing widgets and how to use the widget analytics to understand how students and visitors are engaging with your components.
Any questions? Feel free to start a live chat with a member of our support team or explore the rest of our academy at your leisure.