Verify Via Button

1. Package Installation

After ARGOS ID package is installed, you can create a button to call the modal window.
To create ARGOS ID button, insert 1 CSS file, 1 JS file and <argos-id> tag to the Head Tag.
You can write codes in Java, Python, JSP, PHP, Ruby, Asp, JavaScript.

1-1. Setting Head

To create an ARGOS ID button, <argos-id></argos-id> tag is needed.
To use the tag, 1 CSS file and 1 JS file should be added as shown below.

<head>
		<script defer src="https://id.trustargos.com/bundle.argos-id.js"></script>
		<link href="https://id.trustargos.com/static/css/argos-id.css" rel="stylesheet">
</head>

1-2. Creating ARGOS ID Button

Should be writtne in <body></body> tag.
There are 4 attributes for <argos-id></argos-id> tag.
'id' and 'project' are required.
'chains' and 'button-style' are optional, default value will be set when they are empty.
- When 'chain' is not desgnated in the code, the options set from the dashboard will be applied.
- 'chain' stated in the code has higher priority than the one from the dashboard.
- For the 'chains' value, bsc/eth/klay/matic/sol are available. They all should be seperated with a comma(,) and all should be in lower characters.
- 'chains' can be text but when it needs to dynamic, use dynamic variables.
- For 'button-style', CSS won't be applied. Please designate it as a variable and apply CSS.

Attribute

Required

Description

required

Set ID of ARGOS ID button.

project

required

The ID of project created from the dashboard.

chains

optional

Chains to be verified.

button-style

optional

Set the CSS of the button, it will be overlayed with existing style.

1-3. Code Examples

With only <argos-id></argos-id> tag, the button won't be created. Options must be set between <script></script>.
<script></script> tag shold be written under the <argos-id></argos-id> tag.

1-3-1. Basic Code

<argos-id 
		id = "{id}"
		project = "{projectId}"
		>
</argos-id>

1-3-2. Option Applied Code

To set the property dynamically, specify it as variable and apply the options.
<script></script> parts are examples.

<argos-id 
		id= "{id}" 
		project ="{projectId}"
		button-style = "{button-style}"
		chains = "{chains}"
>
</argos-id>
<script>
    const argosIdButton = document.getElementById('id');
    const chains = "bsc,eth,klay"
    argosIdButton.setAttribute('chains', chains)
    argosIdButton.setAttribute('button-style', '{"backgroundColor":"blue", "color":"white"}')
</script>

EX)

<argos-id 
		id="argos-id-button"
		project ="projectId"
		button-style = "{button-style}"
		chains = "{chains}"
>
</argos-id>
<script>
	if (window.location.href.includes('eth') {
				const argosIdButton = document.getElementById('argos-id-button');
		    argosIdButton.setAttribute('chains', 'eth')
	}
</script>

Last updated 2 years ago