> For the complete documentation index, see [llms.txt](https://shx-store.gitbook.io/shxstore/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shx-store.gitbook.io/shxstore/~/changes/sWltUEee2euonRDw7ATu/scripts/shx-idcard/installation.md).

# Installation

## Requirements <a href="#requirements" id="requirements"></a>

* [MugshotBase64](https://github.com/BaziForYou/MugShotBase64)

## Exports

<pre class="language-lua" data-full-width="false"><code class="lang-lua">Client Side Exports 
 -- Id Card
<strong> exports['shx-idcard']:CreateCard('id_card')
</strong><strong> -- Police Badge
</strong><strong> exports['shx-idcard']:CreateCard('police_badge')
</strong><strong> -- EMS Badge
</strong><strong> exports['shx-idcard']:CreateCard('ems_badge')
</strong></code></pre>

## Test Command <a href="#configuration" id="configuration"></a>

```lua
RegisterCommand("test982", function()
	exports['shx-idcard']:CreateCard('id_card')
	exports['shx-idcard']:CreateCard('police_badge')
	exports['shx-idcard']:CreateCard('ems_badge')
end)
```

## Configuration <a href="#configuration" id="configuration"></a>

#### ESX or QBcore <a href="#esx" id="esx"></a>

{% code title="shx-idcard/config.lua" %}

```lua
Config = {}

Config.Framework = "qbcore" -- "qbcore" or "esx"
Config.Inventory = "qb_inventory" -- "qb_inventory" or "ox_inventory" or "qs_inventory"

Config.Genders = {
    male = "Male", -- Male
    female = "Female" -- Female
}

function showNotification(msg)
    -- Example configurations:

    --  GTA (default)
    BeginTextCommandThefeedPost('STRING')
	AddTextComponentSubstringPlayerName(msg)
	EndTextCommandThefeedPostTicker(0,1)

    --  pNotify
    -- exports.pNotify:SendNotification({text = msg})
end 
```

{% endcode %}

## INVENTORY

{% hint style="danger" %}
**Note :**  /giveitem ID id\_card 1

Don't use giveitem for cards, use this instead
{% endhint %}

### ox\_inventory

You also need to add the item to ox\_inventory. To do this, navigate to `ox_inventory/data/items.lua` and modify it to look like this:

{% code title="ox\_inventory\data\items.lua" %}

```lua

['id_card'] = {
 label = 'ID Card',
 weight = 1,
 close = true,
 stack = false,
 consume = 0
},

['police_badge'] = {
 label = 'Police Badge',
 weight = 1,
 close = true,
 stack = false,
 consume = 0
},

['ems_badge'] = {
 label = 'EMS Badge',
 weight = 1,
 close = true,
 stack = false,
 consume = 0
},
```

{% endcode %}

You also need to add the item usable to ox\_inventory. To do this, navigate to `ox_inventory/modules/items/client.lua` and modify it to look like this:

{% code title="ox\_inventory\modules\items\client.lua" %}

```lua
Item('id_card', function(data, slot)
    TriggerEvent('shx-idcard:showId', slot.metadata)
end)

Item('police_badge', function(data, slot)
    TriggerEvent('shx-idcard:showPoliceBadge', slot.metadata)
end)

Item('ems_badge', function(data, slot)
    TriggerEvent('shx-idcard:showEMSBadge', slot.metadata)
end
```

{% endcode %}

### qb\_inventory

Go to `qb-inventory/js/app.js` and find the function `function FormatItemInfo(itemData) {`, by default at line 384. After `if (itemData != null && itemData.info != "") {`, add the following code:

{% code title="qb-inventory/js/app.js" %}

```javascript
if (itemData.name == "id_card") {
   $(".item-info-title").html("<p>" + itemData.label + "</p>");
   $(".item-info-description").html(
      "</span></p><p><strong>Firstname: </strong><span>" +
      itemData.info.firstname +
      "</span></p><p><strong>Lastname: </strong><span>" +
      itemData.info.lastname +
      "</span></p><p><strong>Date Of Birth: </strong><span>" +
      itemData.info.birthdate +
      "</span></p><p><strong>Gender: </strong><span>" +
      gender +
      "</span></p>"
);
   } else if (itemData.name == "ems_badge") {
       $(".item-info-title").html("<p>" + itemData.label + "</p>");
       $(".item-info-description").html(
       "<p><strong>Firstname: </strong><span>" +
       itemData.info.firstname +
       "</span></p><p><strong>Lastname: </strong><span>" +
       itemData.info.lastname +
       "</span></p>"
);
   } else if (itemData.name == "police_badge") {
       $(".item-info-title").html("<p>" + itemData.label + "</p>");
       $(".item-info-description").html(
       "<p><strong>Firstname: </strong><span>" +
       itemData.info.firstname +
       "</span></p><p><strong>Lastname: </strong><span>" +
       itemData.info.lastname +
       "</span></p>"
);
```

{% endcode %}

Go to `qb-core/shared/items.lua`, add the following code:

{% code title="qb-core/shared/items.lua" %}

```lua
['id_card'] 			 	 	 = {['name'] = 'id_card', 			  		['label'] = 'ID Card', 			        ['weight'] = 100, 		['type'] = 'item', 		['image'] = 'id_card.png', 			['unique'] = true, 		['useable'] = true, 	['shouldClose'] = true,	   ['combinable'] = nil,   ['description'] = 'ID Card'},
['police_badge'] 			 	 = {['name'] = 'police_badge', 			  	        ['label'] = 'Police Badge', 			['weight'] = 100, 		['type'] = 'item', 		['image'] = 'police_badge.png', 		['unique'] = true, 		['useable'] = true, 	['shouldClose'] = true,	   ['combinable'] = nil,   ['description'] = 'Police Badge'},
['ems_badge'] 			 	         = {['name'] = 'ems_badge', 			  		['label'] = 'EMS Badge', 			['weight'] = 100, 		['type'] = 'item', 		['image'] = 'ems_badge.png', 			['unique'] = true, 		['useable'] = true, 	['shouldClose'] = true,	   ['combinable'] = nil,   ['description'] = 'EMS Badge'},
```

{% endcode %}

### qs-inventory

Add qs-inventory/config/config\_metadata.js

{% code title="qs-inventory/config/config\_metadata.js" %}

```javascript
if (itemData.name == "id_card") {
   $(".item-info-title").html("<p>" + itemData.label + "</p>");
   $(".item-info-description").html(
      "</span></p><p><strong>Firstname: </strong><span>" +
      itemData.info.firstname +
      "</span></p><p><strong>Lastname: </strong><span>" +
      itemData.info.lastname +
      "</span></p><p><strong>Date Of Birth: </strong><span>" +
      itemData.info.birthdate +
      "</span></p><p><strong>Gender: </strong><span>" +
      gender +
      "</span></p>"
);
   } else if (itemData.name == "ems_badge") {
       $(".item-info-title").html("<p>" + itemData.label + "</p>");
       $(".item-info-description").html(
       "<p><strong>Firstname: </strong><span>" +
       itemData.info.firstname +
       "</span></p><p><strong>Lastname: </strong><span>" +
       itemData.info.lastname +
       "</span></p>"
);
   } else if (itemData.name == "police_badge") {
       $(".item-info-title").html("<p>" + itemData.label + "</p>");
       $(".item-info-description").html(
       "<p><strong>Firstname: </strong><span>" +
       itemData.info.firstname +
       "</span></p><p><strong>Lastname: </strong><span>" +
       itemData.info.lastname +
       "</span></p>"
);
```

{% endcode %}

Go to qs-inventory/config/config\_items.lua

{% code title="qs-inventory/config/config\_items.lua" %}

```lua
['police_badge'] =  {
    ['name'] =  'police_badge',
    ['label'] =  'Police Badge',
    ['weight'] =  200,
    ['type'] =  'item',
    ['image'] =  'police_badge.png',
    ['unique'] =  true,
    ['useable'] =  true,
    ['shouldClose'] =  true,
    ['combinable'] =  nil,
    ['description'] =  'Badge',
},
['id_card'] =  {
    ['name'] =  'id_card',
    ['label'] =  'ID Card',
    ['weight'] =  200,
    ['type'] =  'item',
    ['image'] =  'id_card.png',
    ['unique'] =  true,
    ['useable'] =  true,
    ['shouldClose'] =  true,
    ['combinable'] =  nil,
    ['description'] =  'ID Card',
},
['ems_badge'] =  {
    ['name'] =  'ems_badge',
    ['label'] =  'EMS Badge',
    ['weight'] =  200,
    ['type'] =  'item',
    ['image'] =  'ems_badge.png',
    ['unique'] =  true,
    ['useable'] =  true,
    ['shouldClose'] =  true,
    ['combinable'] =  nil,
    ['description'] =  'Badge',
},
```

{% endcode %}