SORRY OUR WEBSITE NEED JAVASCRIPT Embedded Code – DiagramArt

Detail

DiagramArt Detail is a widget to preview diagram detail.

Embed

If you want to add any diagram from DiagramArt to your page, just add the code below wherever you want to display it and change <PRODUCT ID> to the real product ID you find in Info tab.

<iframe src="https://diagramart.com/pages/embed?id=<PRODUCT ID>"></iframe>

Advanced

This is for advanced users, who knows how to use JavaScript libraries ( like jQuery ). You need to follow a few steps to add diagram detail to your site.

CSS

Add DiagramArt Detail theme CSS to your page. Insert this code between and tags.

<html>
  <head>
    ...
    <link href="./css/da-detail-theme.css" rel="stylesheet" />
    ...
  </head>
  ...
</html>
Create element

Place a <div> tag into your page, where you want to render the DiagramArt detail. It has to have an ID, so you can target it later.

<div id="da-detail"></div>
Load our JavaScript library

The last step is to load the javascript library and initialize the widget.

The DiagramArtDetail function takes an object as its parameter, where you have to specify the element's ID where it has to be rendered and the diagram ID of diagram that you want to be displayed.

<html>
<body>
...
<script src="./js/diagramartdetail.js"></script>
<script>
        DiagramArtDetail({
            selector:"da-detail",
            diagramId: 4902083204
        });
    </script>
</body>
</html>

More

There are a few more options you can set when initializing the widget.

Display type

There are three available "themes", so you can choose how the detail is displayed on your page.

As a card :

<script>
DiagramArtDetail({
        selector:"da-detail",
        detail: {
            type: "card"
        },
        diagramId: 4902083204
    });
</script>

Tabbed informations are next to the preview image :

<script>
DiagramArtDetail({
        selector:"da-detail",
        detail: {
            type: "abreast"
        },
        diagramId: 4902083204
    });
</script>

Tabbed informations are below the preview image :

<script>
    DiagramArtDetail({
        selector:"da-detail",
        detail: {
            type: "under"
        },
        diagramId: 4902083204
    });
</script>

Source code and Examples

You can find the source code on GitHub, and there are couple of examples in example folder.

USER INFORMATION

Please Login to add to your wish list

OK
USER INFORMATION

Something

CANCEL PROCEED
FILTER

Do you want also appy your filter selection?

YES NO CANCEL

LOADING