HTML Widget

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

Preview

Default settings

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

[e-mail]

License

The GNU General Public License