HTML Widget

Artifact HTML Widget can help you display your Artifact decks in your web page.

Preview

Instalation

At the end of your page, right before tag </body>, insert this code:

<script async src="https://widget.artifact.cz/main.min.js"></script>

In order to insert a deck into your page, you have to insert a DIV element with parameter data-url. You have to fill this parameter with URL of the deck.

<div class="artifact-deck-widget" data-url="https://playartifact.com/d/ADCJWkTZX05uwGDCRV4XQGy3QGLmqUBg4GQJgGLGgO7AaABR3JlZW4vQmxhY2sgRXhhbXBsZQ__"></div>

You can insert multiple decks into single page.

Advanced setup

Widget supports this data parameters:

  • data-url

    • Mandatory

    • URL of the artifact deck from playartifact.com

    • you can ALSO insert a deck hash without https://playartifact.com/d/

  • data-width

    • Width of the widget (in px)

    • Default: 320px

  • data-height

    • Height of the widget (in px)

    • Default: 500px

  • data-disable-link

    • Options: true / false

    • Disable / enable "Open on playartifact.com" button

    • Default: enabled

Example with full setup

<div class="artifact-deck-widget" data-disable-link="true" data-width="300" data-height="400" data-url="https://playartifact.com/d/ADCJWkTZX05uwGDCRV4XQGy3QGLmqUBg4GQJgGLGgO7AaABR3JlZW4vQmxhY2sgRXhhbXBsZQ__"></div>

Widget with disabled link, width of 300px, height of 400px.

Full page example: https://widget.artifact.cz/example.html

Resources

  • Valve API

  • Vanilla Javascript (no jQuery)

Credits

topekar@gmail.com

License

The GNU General Public License

Last updated