Streaming live at 10am (PST)

Embedd whiteboard


#1

hi everyone! Im very new to web development and how everything works.

I wanted to embed this whiteboard into a single page on my webflow site but i seem to be having trouble doing so. I put the code and stuff into the header and body from the settings and in the add embedded section but im not getting anything when i view the page. Any help will be much appreciated!!

Thank you!


#2

Can you post your public link? Site settings > Public link. Also publish it to your subdomain so we can see what's happening.


#3

oh sorry! I read the sticky about the public link after I posted this. I just wasn't sure if it was possible to embed this whiteboard into a page on webflow, and if it is possible, what am i doing wrong.

On the whiteboard page link it says to insert this into the header:

<script
type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<link rel="stylesheet" type="text/css"
href="http://static.awwapp.com/plugin/1.0/aww.css"/> <script
type="text/javascript"
src="http://static.awwapp.com/plugin/1.0/aww.min.js"></script>

and this where we want the white board to fill.

<div id="wrapper"></div> <script type="text/javascript">
$(function() { $('#wrapper').awwCanvas(); });
</script>

Once again, I'm new at all this stuff so I wasn't sure if it was gonna work or not. I'm trying to do this for a class but our professor isn't giving us any direction with this so thanks again in advance!

public link: https://webflow.com/design/whiteboard-testing?preview=72accefda73d4a1029fad5ca9cd9bfda
sub-domain(im not sure if this is what you meant): http://whiteboard-testing.webflow.com/
link to the whiteboard code: http://awwapp.com/blog/embedding/


#4

Go to your site dashboard and then Custom Code. In upper field put

<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://static.awwapp.com/plugin/1.0/aww.css"/>
<script type="text/javascript" src="http://static.awwapp.com/plugin/1.0/aww.min.js"></script>

Now in the bottom field put this:

<script type="text/javascript">
  $(function() {
    $('#whiteboard').awwCanvas();
  });
</script>

Save and publish changes. Now go to design mode, select the block you want to be that whiteboard and go to settings (third tab). In unique_id type whiteboard.


#5

Thank you for your help! I followed the steps you said but nothing appears to be loading on the page still when I publish it. Am I suppose to put the whiteboard unique_id on an actual "block" or do i have to drag an embed widget and change that unique id? Thanks again for all your help!


#6

put whiteboard unique id on a block. Also change your script to:

<script type="text/javascript">
  $(document)ready(function() {
    $('#whiteboard').awwCanvas();
  });
</script>

#7