title: Script Tag Reference description: Every data attribute you can set on the Navigic embed script tag. order: 2

Script Tag Reference

Configure the widget by adding data-* attributes to the script tag.

Basic Example

<script
  src="https://releases.navigic.ai/embed/embed.js?v=7"
  data-api-key="pk_wk_YOUR_KEY"
  data-display-mode="bubble"
  data-color="#2563eb"
  async
></script>

Attributes

Attribute	Type	Default	Description
`data-api-key`	`string`	(required)	Your publishable embed key. Starts with `pk_wk_`.
`data-workspace`	`string`	—	Alias for `data-api-key`. If both are set, `data-workspace` takes priority.
`data-display-mode`	`"bubble"` \| `"panel"` \| `"inline"`	`"bubble"`	How the widget renders. See Display Modes.
`data-position`	`"bottom-right"` \| `"bottom-left"`	`"bottom-right"`	Bubble position. Only applies in bubble mode.
`data-color`	CSS color	`"#2563eb"`	Primary color for the bubble, header, and send button.
`data-title`	`string`	`"Chat with us"`	Header title text.
`data-greeting`	`string`	`"Hi! How can I help you today?"`	First message shown when the chat opens.
`data-panel-side`	`"left"` \| `"right"`	`"right"`	Which edge the panel slides from. Only applies in panel mode.
`data-panel-width`	CSS value	`"400px"`	Panel width. Only applies in panel mode.
`data-target-element`	CSS selector	—	Container element for inline mode. Required when `data-display-mode="inline"`.
`data-mode`	`"live"` \| `"mock"`	`"live"`	Use `"mock"` for testing without a live agent. Returns canned responses.
`data-gateway-url`	URL	`"https://navigic.ai/dashboard/runtime"`	Runtime gateway endpoint. You shouldn't need to change this.
`data-manual`	`"true"`	—	Disable auto-init. You must call `NavigicWidget.init()` yourself. See JavaScript API.
`data-user-id`	`string`	—	Auto-identify a user on load. Use with `data-user-hash` for secure verification.
`data-user-hash`	`string`	—	HMAC-SHA256 hash for Identity Verification.

Display Mode Examples

Bubble (default)

<script
  src="https://releases.navigic.ai/embed/embed.js?v=7"
  data-api-key="pk_wk_YOUR_KEY"
  data-position="bottom-right"
  data-color="#3e6d53"
  async
></script>

Panel

<script
  src="https://releases.navigic.ai/embed/embed.js?v=7"
  data-api-key="pk_wk_YOUR_KEY"
  data-display-mode="panel"
  data-panel-side="right"
  data-panel-width="450px"
  async
></script>

Inline

<div id="navigic-chat" style="height: 600px;"></div>
 
<script
  src="https://releases.navigic.ai/embed/embed.js?v=7"
  data-api-key="pk_wk_YOUR_KEY"
  data-display-mode="inline"
  data-target-element="#navigic-chat"
  async
></script>