title: A-frame set websubsurface source to a variable
body: <p>I am using the websurface A-frame component () and I'm wondering how I can make it so when a button is clicked, the url of the websurface will change to the value of a variable I've defined called source. What should happen is for example, if the variable source is set to &quot;https://google.ca&quot; and you click the button, the websurface url will change to <a href="https://google.ca" rel="nofollow noreferrer">https://google.ca</a>. Current code:</p>
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;title&gt;Example 1&lt;/title&gt;
      &lt;script src=&quot;https://aframe.io/releases/1.2.0/aframe.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://unpkg.com/aframe-websurfaces@1.4.0/dist/aframe-websurfaces.umd.js&quot;&gt;&lt;/script&gt;
      &lt;script&gt;
      function updateSource() {
      let source = &quot;https://google.ca&quot;;
      
      }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;button style=&quot;position: fixed; z-index: 100000;&quot; onclick=&quot;updateSource()&quot;&gt;
    update src
    &lt;/button&gt;
      &lt;a-scene&gt;
        &lt;!--Camera--&gt;
        &lt;a-entity
          wasd-controls=&quot;acceleration: 20;&quot;
          camera=&quot;active: true&quot;
          look-controls=&quot;pointerLockEnabled: false&quot;
          position=&quot;0 1.6 0&quot;
        &gt;
          &lt;a-cursor position=&quot;0 0 -.05&quot; scale=&quot;.04 .04 1&quot;&gt;&lt;/a-cursor&gt;
        &lt;/a-entity&gt;
  
        &lt;!--Environment--&gt;
        &lt;a-sky color=&quot;#aff&quot;&gt;&lt;/a-sky&gt;
        &lt;a-plane
          rotation=&quot;-90 0 0&quot;
          width=&quot;20&quot;
          height=&quot;20&quot;
          color=&quot;#3fa841&quot;
        &gt;&lt;/a-plane&gt;
  
        &lt;!--Websurface--&gt;
        &lt;a-entity
          websurface=&quot;url:https://aframe.io/; width:4; height:2;&quot;
          position=&quot;2.25 1.5 -4&quot;
        &gt;&lt;/a-entity&gt;
  
      &lt;/a-scene&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Fiddle with code: <a href="https://jsfiddle.net/AidanYoung/7vye3osa/2/" rel="nofollow noreferrer">https://jsfiddle.net/AidanYoung/7vye3osa/2/</a></p>