Embedding canUmeet web widgets

by Chandra Bhushan | 14 Min Read

In today’s world, ranging from MNCs to early SaaS companies, all are benefiting hugely using widgets. Widgets are basically discrete chunks of code for applications that can be easily embedded into almost any webpage by user. They are designed with a motive that users can perform some specific tasks without having to stray from their application and make it present everywhere on your personal page without taking much room. These chunks of code really does solve problems of users not having to search around and find links for particular feature on creators webpage as it is always in-front of them.

Understanding the dynamics of metrics such as customer engagement with canUmeet and the scheduling problem that canUmeet is trying to solve for them, ultimately gaining utmost product satisfaction, our team have provided users with easy to install canUmeet widgets. Now, book, create widget and share your appointments on fingertips.

Currently, canUmeet is providing users embedding widgets of 3 types:

  • Popup Widget.
  • Sidebar Widget.
  • Inline Widget.

Creating a widget for your event:

  • On the events page where your booked events are listed, head over to dotted lines image under Action column.
  • A drop down menu appears showing embed as a option, click on it.
  • Click on Create Widget button.
  • Give your widget a name (Not Seen by customers) and select type of widget you want to embed .
  • You also have options to customize the look and feel of widget as per your need.
  • Copy and paste the embed code before the body tag on your webpage and you are good to go.

Popup Widget:

Copy to this embed widget code to your webpage just before body tag where you want to show canUmeet Popup widget to your visitors.

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
/* canUmeet Embed Code -- Start */
window.onload = (function() {
var po = document.createElement('script');po.type = 'text/javascript';po.async = true;
po.src = 'https://www.canumeet.com/embed-dist/canumeet.popup.embed.js';var s = document.getElementsByTagName('script')[0];
po.addEventListener('load', function (e) { window.CanumeetEmbed.App.init('59dc2db8880adc00300488e2','https://www.canumeet.com') }, false);s.parentNode.insertBefore(po, s);
})();
/* canUmeet Embed Code -- End */
</script>

Sidebar Widget:

Copy this embed widget code to your webpage just before body tag where you want to show canUmeet Sidebar widget to your visitors.

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
/* canUmeet Embed Code -- Start */
window.onload = (function() {
var po = document.createElement('script');po.type = 'text/javascript';po.async = true;
po.src = 'https://www.canumeet.com/embed-dist/canumeet.sidebar.embed.js';var s = document.getElementsByTagName('script')[0];
po.addEventListener('load', function (e) { window.CanumeetEmbed.App.init('59dc2ca0880adc00300488dc','https://www.canumeet.com') }, false);s.parentNode.insertBefore(po, s);
})();
/* canUmeet Embed Code -- End */
</script>

Inline Widget:

canUmeet Inline Widgets are further categorized into two fragments depending on users requirements.

  • Inline - Toggle Visibility
  • Inline - Visibility can’t be toggled

For Inline widget where visibility can be toggled , Copy below embed widget code to your webpage just before body tag.

1
2
3
4
5
6
7
8
9
10
<div id="canumeet-emfa-container" style="height:670px;margin:10px;"></div>
<script type="text/javascript">
/* canUmeet Embed Code -- Start */
window.onload = (function() {
var po = document.createElement('script');po.type = 'text/javascript';po.async = true;
po.src = 'https://www.canumeet.com/embed-dist/canumeet.inline.embed.js';var s = document.getElementsByTagName('script')[0];
po.addEventListener('load', function (e) { window.CanumeetEmbed.App.init('59dc2dfa880adc00300488e3','https://www.canumeet.com') }, false);s.parentNode.insertBefore(po, s);
})();
/* canUmeet Embed Code -- End */
</script>
1
2
3
4
5
6
/* Use the following function to toggle Inline widget */
window.CanumeetEmbed.App.toggleSlide();
/* Example - */
<a href="" onclick="window.CanumeetEmbed.App.toggleSlide();return false;">
Toggle Inline Expand Widget
</a>

For Inline widget where visibility can’t be toggled , Copy this embed widget code to your webpage just before body tag.

1
2
3
4
5
6
7
8
9
10
<div id="canumeet-emfa-container" style="height:670px;margin:10px;"></div>
<script type="text/javascript">
/* canUmeet Embed Code -- Start */
window.onload = (function() {
var po = document.createElement('script');po.type = 'text/javascript';po.async = true;
po.src = 'https://www.canumeet.com/embed-dist/canumeet.inline.embed.js';var s = document.getElementsByTagName('script')[0];
po.addEventListener('load', function (e) { window.CanumeetEmbed.App.init('59dc2e63880adc00300488e4','https://www.canumeet.com') }, false);s.parentNode.insertBefore(po, s);
})();
/* canUmeet Embed Code -- End */
</script>

Customizing Widgets:

Give your selected widgets an elegant look by modifying them as per your choice. At the same time preview them to check how widget looks later modifications. Currently users can

  • Modify Border structure of your widget by Width, Color, and Radius
  • Modify Message Us button text and color
  • Modify Timezone button color
  • Modify Any other button color
  • Toggle options if they want to show their widgets inside frame

Why wait ?? Place this created widget on your home page, feature page, customer support page, help page, anywhere you would like and give your invitees a convenient way to schedule meeting with you.

For any queries or suggestions on this, shoot a mail to us on support@canumeet.com ! We will be more than happy to help you.

Start for free!.

Now manage your availability, be in sync with your calendars,
and share your events, all in just few clicks using this scheduling platform.
canUmeet has been designed such that users can easily view appointments,
send reminders/notifications in few clicks.

Sign Up Now