{"id":7033,"date":"2024-05-05T16:07:09","date_gmt":"2024-05-05T16:07:09","guid":{"rendered":"https:\/\/www.greminders.com\/articles\/?p=7033"},"modified":"2024-10-30T01:33:38","modified_gmt":"2024-10-30T01:33:38","slug":"embedding-scheduling-pages-into-webflow","status":"publish","type":"post","link":"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/","title":{"rendered":"Embedding Scheduling Pages into Webflow"},"content":{"rendered":"\n<p><a href=\"https:\/\/webflow.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Webflow<\/a> is an excellent tool for building Web Pages, acts as a CMS (Content Management System) and provides a very nice WYSIWYG interface for designing corporate sites, ecommerce sites, etc&#8230;    <\/p>\n\n\n\n<p>The GReminders Booking widget can be easily embedded into a Webflow page.  For example to Schedule a Demo, or Book a Support Call, or Meeting with your Staff.<\/p>\n\n\n\n<p>There are a couple of options:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Button Link<\/h2>\n\n\n\n<p>The very Simple version is to link a button to a Scheduling Page<\/p>\n\n\n\n<p>Add a Button to your Page and then add the Public GReminders Event Type URL into the Link Settings URL Setting like so:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"542\" src=\"https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/webflow_link-1024x542.jpg\" alt=\"\" class=\"wp-image-7034\" srcset=\"https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/webflow_link-1024x542.jpg 1024w, https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/webflow_link-300x159.jpg 300w, https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/webflow_link-768x406.jpg 768w, https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/webflow_link.jpg 1334w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This will simply take the user to the scheduling page.  <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Popup Version<\/h2>\n\n\n\n<p>If you want to do a popup modal like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"793\" height=\"843\" src=\"https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/gr_popup_modal.jpg\" alt=\"\" class=\"wp-image-7035\" srcset=\"https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/gr_popup_modal.jpg 793w, https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/gr_popup_modal-282x300.jpg 282w, https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/gr_popup_modal-768x816.jpg 768w\" sizes=\"(max-width: 793px) 100vw, 793px\" \/><\/figure>\n\n\n\n<p>You will need to do a few things. <\/p>\n\n\n\n<p><a href=\"https:\/\/developer.greminders.com\/#javascript-modal\">More advanced code details are here<\/a>.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Go into Site Settings OR Page Settings in your Webflow and paste in the script code<\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/app.greminders.com\/widgets\/booking.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\"&gt;\nwindow.onload = function() {\n    GReminders.BookingWidget.initialize(\n        'https:\/\/app.greminders.com\/t\/015fa81d\/demo'\n\n    );\n    GReminders.BookingWidget.onSuccess(function(event_id, form_data) {\n        \/\/we automatically close the widget on successful booking, you can continue your flow here\n        GReminders.BookingWidget.close();\n        window.location.href = '\/scheduled';\n    });\n    GReminders.BookingWidget.onError(function(message) {\n        \/\/if we encounter a booking error you can trigger a different error or retry\n        GReminders.BookingWidget.close();\n    });\n\n\n  \/\/this loops through ALL elements with the classname of grbuttons and checks for a whenClicked attribute\n  var anchors = document.getElementsByClassName('grbuttons');\n  for(var i = 0; i &lt; anchors.length; i++) {\n      var anchor = anchors&#91;i];\n      anchor.onclick = function() {\n          code = this.getAttribute('whenClicked');\n          eval(code);   \n      }\n  }\n\n};\n\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"586\" src=\"https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/webflow_site_settings-1024x586.jpg\" alt=\"\" class=\"wp-image-7037\" srcset=\"https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/webflow_site_settings-1024x586.jpg 1024w, https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/webflow_site_settings-300x172.jpg 300w, https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/webflow_site_settings-768x439.jpg 768w, https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/webflow_site_settings.jpg 1306w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Then go back to your Designer and add a button.<\/p>\n\n\n\n<p>Edit the Button Settings and add the following custom attributes<\/p>\n\n\n\n<p><code>class = grbuttons<\/code><\/p>\n\n\n\n<p><code>whenClicked = GReminders.BookingWidget.open();<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"470\" src=\"https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/button_settings_webflow-1024x470.jpg\" alt=\"\" class=\"wp-image-7044\" srcset=\"https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/button_settings_webflow-1024x470.jpg 1024w, https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/button_settings_webflow-300x138.jpg 300w, https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/button_settings_webflow-768x352.jpg 768w, https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/button_settings_webflow.jpg 1328w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This tells the page that when this button is clicked open the Booking Widget.   The code you put in your site settings tells the page to look for any elements with grbuttons and then to execute the code that has the whenClicked attributed on it.<\/p>\n\n\n\n<p>Save and PUBLISH the site.  <\/p>\n\n\n\n<p>Note: You need to publish the site to see it work, it will not work in preview mode.<\/p>\n\n\n\n<p>Thats It.<\/p>\n\n\n\n<p>Any questions?   Email to support@greminders.com.<\/p>\n\n\n\n<p>Happy Building<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Webflow is an excellent tool for building Web Pages, acts as a CMS (Content Management System) and provides a very nice WYSIWYG interface for designing corporate sites, ecommerce sites, etc&#8230; The GReminders Booking widget can be easily embedded into a Webflow page. For example to Schedule a Demo, or Book a Support Call, or Meeting [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7039,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47],"tags":[],"class_list":["post-7033","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-api-embedding"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Embedding Scheduling Pages into Webflow - End to End Meeting Management Platform - SMS Reminders - AI Notetaker<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Embedding Scheduling Pages into Webflow - End to End Meeting Management Platform - SMS Reminders - AI Notetaker\" \/>\n<meta property=\"og:description\" content=\"Webflow is an excellent tool for building Web Pages, acts as a CMS (Content Management System) and provides a very nice WYSIWYG interface for designing corporate sites, ecommerce sites, etc&#8230; The GReminders Booking widget can be easily embedded into a Webflow page. For example to Schedule a Demo, or Book a Support Call, or Meeting [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/\" \/>\n<meta property=\"og:site_name\" content=\"End to End Meeting Management Platform - SMS Reminders - AI Notetaker\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/greminders\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-05T16:07:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-30T01:33:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/webflow_header.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1048\" \/>\n\t<meta property=\"og:image:height\" content=\"543\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sarah Mitchell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sarah Mitchell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/\",\"url\":\"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/\",\"name\":\"Embedding Scheduling Pages into Webflow - End to End Meeting Management Platform - SMS Reminders - AI Notetaker\",\"isPartOf\":{\"@id\":\"https:\/\/www.greminders.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/webflow_header.jpg\",\"datePublished\":\"2024-05-05T16:07:09+00:00\",\"dateModified\":\"2024-10-30T01:33:38+00:00\",\"author\":{\"@id\":\"https:\/\/www.greminders.com\/articles\/#\/schema\/person\/66d470bd275ecb9976129c8fd4f37b5c\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/#primaryimage\",\"url\":\"https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/webflow_header.jpg\",\"contentUrl\":\"https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/webflow_header.jpg\",\"width\":1048,\"height\":543},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.greminders.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Embedding Scheduling Pages into Webflow\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.greminders.com\/articles\/#website\",\"url\":\"https:\/\/www.greminders.com\/articles\/\",\"name\":\"End to End Meeting Management Platform - SMS Reminders - AI Notetaker\",\"description\":\"GReminders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.greminders.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.greminders.com\/articles\/#\/schema\/person\/66d470bd275ecb9976129c8fd4f37b5c\",\"name\":\"Sarah Mitchell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.greminders.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/73447d573800be149535f95a3b5b4a42?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/73447d573800be149535f95a3b5b4a42?s=96&d=mm&r=g\",\"caption\":\"Sarah Mitchell\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Embedding Scheduling Pages into Webflow - End to End Meeting Management Platform - SMS Reminders - AI Notetaker","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/","og_locale":"en_US","og_type":"article","og_title":"Embedding Scheduling Pages into Webflow - End to End Meeting Management Platform - SMS Reminders - AI Notetaker","og_description":"Webflow is an excellent tool for building Web Pages, acts as a CMS (Content Management System) and provides a very nice WYSIWYG interface for designing corporate sites, ecommerce sites, etc&#8230; The GReminders Booking widget can be easily embedded into a Webflow page. For example to Schedule a Demo, or Book a Support Call, or Meeting [&hellip;]","og_url":"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/","og_site_name":"End to End Meeting Management Platform - SMS Reminders - AI Notetaker","article_publisher":"https:\/\/www.facebook.com\/greminders\/","article_published_time":"2024-05-05T16:07:09+00:00","article_modified_time":"2024-10-30T01:33:38+00:00","og_image":[{"width":1048,"height":543,"url":"https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/webflow_header.jpg","type":"image\/jpeg"}],"author":"Sarah Mitchell","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Sarah Mitchell","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/","url":"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/","name":"Embedding Scheduling Pages into Webflow - End to End Meeting Management Platform - SMS Reminders - AI Notetaker","isPartOf":{"@id":"https:\/\/www.greminders.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/#primaryimage"},"image":{"@id":"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/#primaryimage"},"thumbnailUrl":"https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/webflow_header.jpg","datePublished":"2024-05-05T16:07:09+00:00","dateModified":"2024-10-30T01:33:38+00:00","author":{"@id":"https:\/\/www.greminders.com\/articles\/#\/schema\/person\/66d470bd275ecb9976129c8fd4f37b5c"},"breadcrumb":{"@id":"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/#primaryimage","url":"https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/webflow_header.jpg","contentUrl":"https:\/\/www.greminders.com\/articles\/wp-content\/uploads\/2024\/05\/webflow_header.jpg","width":1048,"height":543},{"@type":"BreadcrumbList","@id":"https:\/\/www.greminders.com\/articles\/embedding-scheduling-pages-into-webflow\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.greminders.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Embedding Scheduling Pages into Webflow"}]},{"@type":"WebSite","@id":"https:\/\/www.greminders.com\/articles\/#website","url":"https:\/\/www.greminders.com\/articles\/","name":"End to End Meeting Management Platform - SMS Reminders - AI Notetaker","description":"GReminders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.greminders.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.greminders.com\/articles\/#\/schema\/person\/66d470bd275ecb9976129c8fd4f37b5c","name":"Sarah Mitchell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.greminders.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/73447d573800be149535f95a3b5b4a42?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/73447d573800be149535f95a3b5b4a42?s=96&d=mm&r=g","caption":"Sarah Mitchell"}}]}},"_links":{"self":[{"href":"https:\/\/www.greminders.com\/articles\/index.php?rest_route=\/wp\/v2\/posts\/7033"}],"collection":[{"href":"https:\/\/www.greminders.com\/articles\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.greminders.com\/articles\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.greminders.com\/articles\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greminders.com\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7033"}],"version-history":[{"count":4,"href":"https:\/\/www.greminders.com\/articles\/index.php?rest_route=\/wp\/v2\/posts\/7033\/revisions"}],"predecessor-version":[{"id":7045,"href":"https:\/\/www.greminders.com\/articles\/index.php?rest_route=\/wp\/v2\/posts\/7033\/revisions\/7045"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.greminders.com\/articles\/index.php?rest_route=\/wp\/v2\/media\/7039"}],"wp:attachment":[{"href":"https:\/\/www.greminders.com\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greminders.com\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greminders.com\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}