Creating a new styleshot
A styleshot is a snapshot of the content and styling behind an app or webpage at a particular state and time.
This can be generated manually through the web browser, or programmatically through the API.
Creating manually through browser
When you click the bookmarklet link, a UI will appear that allows you to select the page you’d like to use for the fixture.
You can also create a fixture based on a specific element on the page by holding down the CTRL key and clicking on its area.
The next screen will allow you to choose a unique query selector if it was not detected automatically.
<script type="text/javascript" src="https://www.butterflyfx.io/static/js/client.js"></script>
<script type="text/javascript">
var API_KEY = "INSERT-API-KEY-HERE";
var PROJECT_ID = 0;
var client = new ButterflyFX({project:PROJECT_ID, token:API_KEY});
var selector = ".my-container";
var html = document.querySelector(selector.outerHTML);
client.saveFixture({
name: "Hello world",
html: html,
selector: selector,
// Assumes a previously create fixture with slug "main-page"
parent: "main-page"
});
</script>
// npm install butterflyfx-client
const API_KEY = “INSERT-API-KEY-HERE”;
const PROJECT_ID = 0;
const ButterflyFX = require(‘butterflyfx-client’);
let client = new ButterflyFX({project:PROJECT_ID, token:API_KEY});
// An ordinary html string can be used here instead of document.querySelector
let selector = “.my-container”;
let html = document.querySelector(“html”).outerHTML;
client.saveFixture({
name: “Hello world”,
html: html,
selector: selector,
// Assumes a previously create fixture with slug “main-page”
parent: “main-page”
});