Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script async src="https://widgetic.com/sdk/sdk.js"></script>
</head>
  
<body>
  <!-- 
  themes: 
    p1_537e2ddb09c7e2da678b4567
    p2_537e2ddb09c7e2da678b4567
    p3_537e2ddb09c7e2da678b4567
    p4_537e2ddb09c7e2da678b4567
    p5_537e2ddb09c7e2da678b4567
    p7_537e2ddb09c7e2da678b4567
​
  theme properties and example value formats:
    backgroundcolor="#66666B"
    button-color="rgba(65, 65, 206, 0.9)"
    stroke-color="#000"
    button-hover-color="rgba(52, 52, 195, 0.98)"
    stroke-hover-color="#13700E"
    stroke-thickness="0"
    font-size="50"
    button-size="80"
    button-radius="0"
    button-distance="0"
    text-color="#fff"
    text-hover-color="#fff"
    navigation-padding="0"
    description-back-color="rgba(65, 65, 206, 0.9)"
    description-text-color="#fff"
  -->
  
  <widgetic-embed 
        ref="nature" 
        widget="537e2ddb09c7e2da678b4567" 
        theme="p2_537e2ddb09c7e2da678b4567"
        resize="fixed-height" 
        height="640" 
        backgroundcolor="#efefef"
        button-color="rgba(100, 0, 100, .7)" 
        button-hover-color="rgba(0, 0, 0, 1)" 
        button-size="50" 
        stroke-thickness="0">
    
    <img src="https://source.unsplash.com/random/1500x700" alt="something"/>
    
  </widgetic-embed>
 
  
  <h2>Public API Calls</h2> 
  <p>Developers can use external JS calls to control a widget's behaviour. Click on the buttons below.</p>
  </br>
  <button onclick="Widgetic.find('nature').api.zoomIn()">ZOOM IN (+)</button>
  <button onclick="Widgetic.find('nature').api.zoomOut()">ZOOM OUT (-)</button>
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
widgeticdevpro
0viewers