Is it possible to have cloudsponge initialize into an element inside of a page instead of a popup?

Yes!

You might not like the way our widget appears inside an overlay on your page. You might prefer to put it inside a bootstrap modal or something simpler.

Here’s an example showing the widget loading inside of a simple HTML element on the page. You are able to style or position this element how you like on your own page.

This example makes use of the inline theme to suppress the overlay and use relative positioning for the widget. It uses the rootNodeSelector option to attach the widget to a specific element. Finally, it uses the widget’s lifecycle callbacks to show and hide the container element as the widget is opened and closed.

Show Code

<!-- TODO: update the script with your own Cloudsponge key -->
<script src="https://api.cloudsponge.com/widget/localhost-only.js"></script>
<script>
cloudsponge.init({
  // the inline theme:
  //  uses relative positioning rather than absolute
  //  and hides the overlay
  theme: 'inline',
  // add the widget to this element on the page
  rootNodeSelector: "#cloudsponge-widget",
  // show and hide the widget container as the widget launches and completes
  afterLaunch: function() { $('#cloudsponge-widget').show() },
  beforeClosing: function() { $('#cloudsponge-widget').hide() }
});
</script>
<style>
#cloudsponge-widget {
  /* set where you want the widget to show on your page */
  position: absolute;
  left: 250px;
  /* your div needs a height to give the widget a size limit for scrolling */
  height: 820px;
  /* the default widget width is 100% */
  width: 900px;
}
</style>
<!-- Here's the container for the widget to load inside of -->
<div id="cloudsponge-widget" style="display: none"></div>