In this article, we will be learning about creating embeddable widgets using Connecto’s admin panel.
The difference between creating an embeddable widget or a floating one is that in case of embedded widgets you will have to define the “slot” where the widget has to be placed. Actually, slot is the place inside your webpage where you would want to embed the widget.
You may want to go through this article on benefits and some use cases of embeddable widgets.
Without wasting much time, let’s hop on to how we can create embeddable widgets.
Suppose i want to replace the signup form on my website with an embeddable form. For this, i will first have to insert a short HTML snippet in the slot for existing signup form.
<ins class="connecto-notification" style="display:block;" data-connecto-slot="SOME_UNIQUE_SLOT_ID"> </ins>
Let’s name the slot ID as “signup_slot”. The same ID will be used later while creating the form. Now the snippet looks like this:
<ins class="connecto-notification" style="display:block;" data-connecto-slot="signup_slot"></ins>
Once it’s done, i should be able to launch the form in no time. In case you are not a tech person, ask you developer or tech team to spare a couple of minutes and do it for you. Yes, It’s that easy!
Now let’s go step by step and see how to launch the embeddable form on website.
1. Log into your Connecto account
Log into your Connecto account by using the username and password provided when you signed up for Connecto.
2. Go to the choose template screen by clicking on create new notification
You will land on the dashboard after logging in. From the left nav click “Create”. You will now land on the choose templates screen where you will be exposed to numerous templates. By default, all the templates are selected.
3. Filter templates to select embedded widgets only
Filter templates according to display type by selecting embedded widgets and unselecting others. Alternatively, you can scroll down the page to reach the section with embedded widgets.
4. Choose template
Choose any template from the existing options in embedded widgets section. Since, i wanted to launch a signup form, i chose embedded sign up form with heading and text
5. Customize the template – Design your form in the visuals screen
The template already has smart defaults but to suit your requirements you can customize the template in “customize template section” and “customize theme section (inside the advanced options)”. Right from the message text and form dimensions to form color, everything can be modified.
Also, on the right side of the screen, you can see the live preview of your widget. This gives you an idea about the look and feel of the widget and helps you in designing the best fit widget for your website.
Screenshots below explain how i customized the form as per my need.
Note that in embedded slot field, the slot ID defined is same as mentioned in the HTML snippet
6. Apply appropriate targeting in targeting screen
You can choose from various targeting options available – user session based, geo-location based, time based targeting etc. and segment your audience accordingly.
Since i wanted to show this form only on a specific page, i applied page targeting to show it only on signup page.
And to show it to visitors across all devices, i went ahead with targeting to show it on all devices – desktop, mobile and tablet and to all types of visitors -repeat and first time visitors.
7. Name the form, review it and launch
This is the last step where you name the form as per the choice to identify it from the bulk. In case you don’t name it, a default name will be assigned to it – “New notification created on (date and time)”. On the right side of the review screen you will find notification summary. Quickly go through it to make sure that no mistake has been made. Once review is done, you can LAUNCH the widget by clicking on launch button.
Now you can see the widget live on your website!
Hope it was an easy read for you. If you get stuck somewhere or have any questions feel free to reach out to us at support@connecto.io.