pBread/SimpleCustomForm.js

## SimpleCustomForm.js
<body style="height: 95%; width: 95%;">
  <div
    id="player"
    style="position: absolute; top: 0; left: 0; width: 60%; height: 80%;"
  ></div>
  <div style="position: absolute; top: 0; left: 60%; width: 40%; height: 80%;">
    <div id="config-form-wrapper"></div>
  </div>
  <script src="https://clara.io/js/claraplayer.min.js"></script>
</body>
<script>
  const api = claraplayer("player");
  const sceneId = "048ac12d-9585-46fd-9123-9aa376fe9799";
  const configWrapper = document.getElementById("config-form-wrapper");

  api.sceneIO.fetchAndUse(sceneId, null, { waitForPublish: true });

  // Initialize the configuration form
  api.on("preloaded", () =>
    api.configuration.initConfigurator({ form: "Consumer" })
  );

  api.on("loaded", () => {
    const attributes = api.configuration.getAttributes();
    attributes.forEach(formInputCreator);
  });

  function formInputCreator(attribute) {
    // Create and inject an HTML element depending on the attribute type
    switch (attribute.type) {
      case "Number":
        createNumberInput(attribute);
        break;

      case "Options":
        createOptionInput(attribute);
        break;

      case "String":
        createStringInput(attribute);
        break;

      default:
        break;
    }
  }

  function createOptionInput(attribute) {
    const selectDiv = document.createElement("select");
    selectDiv.addEventListener("change", ev =>
      api.configuration.setConfiguration({ [attribute.name]: ev.target.value })
    );

    attribute.values.forEach(value => {
      const optionDiv = document.createElement("option");
      optionDiv.innerHTML = value;
      selectDiv.appendChild(optionDiv);
    });

    configWrapper.appendChild(selectDiv);
  }

  function createNumberInput(attribute) {
    const inputDiv = document.createElement("input");
    inputDiv.setAttribute("type", "number");

    inputDiv.addEventListener("change", ev =>
      api.configuration.setConfiguration({ [attribute.name]: ev.target.value })
    );

    configWrapper.appendChild(inputDiv);
  }

  function createStringInput(attribute) {
    const inputDiv = document.createElement("input");
    inputDiv.setAttribute("type", "text");

    inputDiv.addEventListener("change", ev =>
      api.configuration.setConfiguration({ [attribute.name]: ev.target.value })
    );

    configWrapper.appendChild(inputDiv);
  }
</script>
	<body style="height: 95%; width: 95%;">
	<div
	id="player"
	style="position: absolute; top: 0; left: 0; width: 60%; height: 80%;"
	></div>
	<div style="position: absolute; top: 0; left: 60%; width: 40%; height: 80%;">
	<div id="config-form-wrapper"></div>
	</div>
	<script src="https://clara.io/js/claraplayer.min.js"></script>
	</body>
	<script>
	const api = claraplayer("player");
	const sceneId = "048ac12d-9585-46fd-9123-9aa376fe9799";
	const configWrapper = document.getElementById("config-form-wrapper");

	api.sceneIO.fetchAndUse(sceneId, null, { waitForPublish: true });

	// Initialize the configuration form
	api.on("preloaded", () =>
	api.configuration.initConfigurator({ form: "Consumer" })
	);

	api.on("loaded", () => {
	const attributes = api.configuration.getAttributes();
	attributes.forEach(formInputCreator);
	});

	function formInputCreator(attribute) {
	// Create and inject an HTML element depending on the attribute type
	switch (attribute.type) {
	case "Number":
	createNumberInput(attribute);
	break;

	case "Options":
	createOptionInput(attribute);
	break;

	case "String":
	createStringInput(attribute);
	break;

	default:
	break;
	}
	}

	function createOptionInput(attribute) {
	const selectDiv = document.createElement("select");
	selectDiv.addEventListener("change", ev =>
	api.configuration.setConfiguration({ [attribute.name]: ev.target.value })
	);

	attribute.values.forEach(value => {
	const optionDiv = document.createElement("option");
	optionDiv.innerHTML = value;
	selectDiv.appendChild(optionDiv);
	});

	configWrapper.appendChild(selectDiv);
	}

	function createNumberInput(attribute) {
	const inputDiv = document.createElement("input");
	inputDiv.setAttribute("type", "number");

	inputDiv.addEventListener("change", ev =>
	api.configuration.setConfiguration({ [attribute.name]: ev.target.value })
	);

	configWrapper.appendChild(inputDiv);
	}

	function createStringInput(attribute) {
	const inputDiv = document.createElement("input");
	inputDiv.setAttribute("type", "text");

	inputDiv.addEventListener("change", ev =>
	api.configuration.setConfiguration({ [attribute.name]: ev.target.value })
	);

	configWrapper.appendChild(inputDiv);
	}
	</script>