CDN / ਸਕ੍ਰਿਪਟ ਟੈਗ

CDN ਬਿਲਡ React ਨੂੰ ਅੰਦਰੂਨੀ ਤੌਰ 'ਤੇ ਬੰਡਲ ਕਰਦੀ ਹੈ, ਇਸ ਲਈ ਤੁਸੀਂ ਵਿਜਿਟ ਨੂੰ ਸਟੈਟਿਕ ਸਾਈਟਾਂ, WordPress, Webflow, ਜਾਂ ਕਿਸੇ ਵੀ ਪੰਨੇ 'ਤੇ ਵਰਤ ਸਕਦੇ ਹੋ ਜਿੱਥੇ ਤੁਸੀਂ HTML ਜੋੜ ਸਕਦੇ ਹੋ। ਕਿਸੇ npm, ਬੰਡਲਰ ਜਾਂ ਫਰੇਮਵਰਕ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।

CDN URL

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>

<!-- Each stable release also publishes an immutable /widget/vX.Y.Z/ path
     matching the @thunderphone/widget npm version (v1.1.2 at the time of
     writing). If you pin, you own updating the URL for new releases. -->
<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/v1.1.2/style.css" />
<script src="https://cdn.thunderphone.com/widget/v1.1.2/widget.js"></script>

ਮੂਲ ਵਰਤੋਂ

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
</head>
<body>

  <div id="thunderphone"></div>

  <script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
  <script>
    ThunderPhone.mount({
      element: '#thunderphone',
      publishableKey: 'pk_live_your_publishable_key',
    })
  </script>

</body>
</html>

ਵਿਜਿਟ ਟਾਰਗੇਟ ਐਲੀਮੈਂਟ ਵਿੱਚ ਮਾਊਂਟ ਹੁੰਦਾ ਹੈ ਅਤੇ ਵਿਊਪੋਰਟ ਦੇ ਕਿਸੇ ਕੋਨੇ ਵਿੱਚ ਫਿਕਸਡ-ਪੋਜ਼ੀਸ਼ਨ ਬਾਰ ਵਜੋਂ ਰੈਂਡਰ ਹੁੰਦਾ ਹੈ (ਡਿਫਾਲਟ bottom-right ਹੈ, ਜਿਸ ਨੂੰ position ਵਿਕਲਪ ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ)। ਮਾਊਂਟ ਐਲੀਮੈਂਟ ਸਿਰਫ਼ React ਰੂਟ ਹੈ -- ਪੰਨੇ ਵਿੱਚ ਇਸਦੀ ਸਥਿਤੀ ਇਸ ਗੱਲ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਕਰਦੀ ਕਿ ਵਿਜਿਟ ਕਿੱਥੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।

ਮਾਊਂਟ ਵਿਕਲਪ

ThunderPhone.mount() React ਕੰਪੋਨੈਂਟ ਵਾਲੇ ਹੀ ਵਿਕਲਪ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ, ਨਾਲ ਹੀ element ਪ੍ਰਾਪਰਟੀ ਵੀ:

ਵਿਕਲਪ	ਕਿਸਮ	ਲਾਜ਼ਮੀ	ਡਿਫਾਲਟ	ਵੇਰਵਾ
`element`	`string \| HTMLElement`	ਹਾਂ	--	CSS ਸਿਲੈਕਟਰ (ਉਦਾਹਰਨ ਲਈ, `'#thunderphone'`) ਜਾਂ DOM ਐਲੀਮੈਂਟ ਰੈਫਰੈਂਸ।
`publishableKey`	`string`	ਹਾਂ	--	ਪ੍ਰਕਾਸ਼ਯੋਗ API ਕੁੰਜੀ (`pk_live_...`)। ਏਜੰਟ ਕੁੰਜੀ ਦੀ ਵਿਜਿਟ ਕੌਂਫਿਗਰੇਸ਼ਨ ਤੋਂ ਆਪਣੇ ਆਪ ਨਿਰਧਾਰਤ ਹੁੰਦਾ ਹੈ।
`theme`	`'light' \| 'dark'`	ਨਹੀਂ	`'light'`	ਰੰਗ ਸਕੀਮ।
`primaryColor`	`string`	ਨਹੀਂ	`'#000000'` (ਹਲਕਾ) / `'#ffffff'` (ਗੂੜ੍ਹਾ)	ਐਕਸੈਂਟ ਰੰਗ ਵਜੋਂ ਵਰਤੀ ਜਾਣ ਵਾਲੀ CSS ਰੰਗ ਸਟ੍ਰਿੰਗ।
`title`	`string`	ਨਹੀਂ	`'Voice assistant'`	ਵਿਜਿਟ ਬਾਰ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਣ ਵਾਲਾ ਟੈਕਸਟ।
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	ਨਹੀਂ	`'bottom-right'`	ਫਿਕਸਡ ਵਿਊਪੋਰਟ ਸਥਿਤੀ।
`apiBase`	`string`	ਨਹੀਂ	`'https://api.thunderphone.com/v1'`	API ਬੇਸ URL ਓਵਰਰਾਈਡ।
`language`	`string`	ਨਹੀਂ	--	ਪ੍ਰਤੀ-ਸੈਸ਼ਨ ਭਾਸ਼ਾ ਓਵਰਰਾਈਡ -- ਇੱਕ ਭਾਸ਼ਾ ਕੋਡ ਜਾਂ ਲੋਕੇਲ, ਜਿਵੇਂ `en`, `es`, ਜਾਂ `fr-FR`। ਸੈੱਟ ਨਾ ਹੋਣ 'ਤੇ, ਏਜੰਟ ਦੀ ਕੌਂਫਿਗਰ ਕੀਤੀ ਭਾਸ਼ਾ ਲਾਗੂ ਹੁੰਦੀ ਹੈ।
`voice`	`string`	ਨਹੀਂ	--	ਪ੍ਰਤੀ-ਸੈਸ਼ਨ ਆਵਾਜ਼ ਓਵਰਰਾਈਡ -- ਇੱਕ ਆਵਾਜ਼ ਦਾ ਨਾਮ, ਜਿਵੇਂ `maria`। ਸੈੱਟ ਨਾ ਹੋਣ 'ਤੇ, ਏਜੰਟ ਦੀ ਕੌਂਫਿਗਰ ਕੀਤੀ ਆਵਾਜ਼ ਲਾਗੂ ਹੁੰਦੀ ਹੈ।
`context`	`string`	ਨਹੀਂ	--	ਏਜੰਟ ਨੂੰ ਦਿੱਤਾ ਜਾਣ ਵਾਲਾ ਪ੍ਰਤੀ-ਸੈਸ਼ਨ ਤੱਥਾਤਮਕ ਪੰਨਾ ਜਾਂ ਸਾਈਟ ਸੰਦਰਭ। ਸਰਵਰ-ਸਾਈਡ 'ਤੇ 12,000 ਅੱਖਰਾਂ ਤੱਕ ਛੋਟਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
`onConnect`	`() => void`	ਨਹੀਂ	--	ਵੌਇਸ ਸੈਸ਼ਨ ਕਨੈਕਟ ਹੋਣ 'ਤੇ ਕਾਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
`onDisconnect`	`() => void`	ਨਹੀਂ	--	ਸੈਸ਼ਨ ਸਮਾਪਤ ਹੋਣ 'ਤੇ ਕਾਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
`onError`	`(error) => void`	ਨਹੀਂ	--	ਗਲਤੀਆਂ ਹੋਣ 'ਤੇ ਕਾਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਗਲਤੀ ਵਿੱਚ `error` (ਕੋਡ) ਅਤੇ `message` ਫੀਲਡ ਹੁੰਦੇ ਹਨ।
`ringtone`	`boolean \| string`	ਨਹੀਂ	`false`	ਕਨੈਕਟ ਹੋਣ ਦੌਰਾਨ ਰਿੰਗਟੋਨ ਚਲਾਓ। ਡਿਫਾਲਟ ਰਿੰਗਟੋਨ ਲਈ `true`, ਜਾਂ ਕਸਟਮ ਆਡੀਓ ਲਈ URL ਸਟ੍ਰਿੰਗ।

ਸਫ਼ਾਈ

ThunderPhone.mount() ਸਫ਼ਾਈ ਦੇ ਤਰੀਕਿਆਂ ਵਾਲਾ ਇੱਕ ਵਿਜੇਟ ਇੰਸਟੈਂਸ ਵਾਪਸ ਕਰਦਾ ਹੈ:

<script>
  var widget = ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
  })

  // Later, when you want to remove the widget:
  widget.unmount()

  // Or equivalently:
  widget.destroy()
</script>

unmount() ਅਤੇ destroy() ਦੋਵੇਂ ਇੱਕੋ ਕੰਮ ਕਰਦੇ ਹਨ -- ਇਹ ਕਿਸੇ ਵੀ ਸਰਗਰਮ ਵੌਇਸ ਸੈਸ਼ਨ ਨੂੰ ਡਿਸਕਨੈਕਟ ਕਰਦੇ ਹਨ ਅਤੇ ਵਿਜੇਟ ਨੂੰ DOM ਤੋਂ ਹਟਾਉਂਦੇ ਹਨ। ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਜੋ ਵਧੀਆ ਪੜ੍ਹਿਆ ਜਾਵੇ, ਉਹੀ ਵਰਤੋ।

ਉਦਾਹਰਨਾਂ

ਕਸਟਮ ਰੰਗ ਨਾਲ ਡਾਰਕ ਥੀਮ

<div id="thunderphone"></div>

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    theme: 'dark',
    primaryColor: '#8b5cf6',
    title: 'Talk to our AI',
  })
</script>

ਕਸਟਮ ਸਥਿਤੀ

<div id="thunderphone"></div>

<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    position: 'bottom-left',
  })
</script>

ਇਵੈਂਟ ਕਾਲਬੈਕਸ ਨਾਲ

<div id="thunderphone"></div>

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    onConnect: function () {
      console.log('Call started')
    },
    onDisconnect: function () {
      console.log('Call ended')
    },
    onError: function (error) {
      console.error('Widget error:', error.error, error.message)
    },
  })
</script>

ਰਿੰਗਟੋਨ ਨਾਲ

<div id="thunderphone"></div>

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    ringtone: true, // or a custom URL: 'https://example.com/ringtone.mp3'
  })
</script>

DOM ਐਲੀਮੈਂਟ ਰੈਫ਼ਰੈਂਸ ਦੀ ਵਰਤੋਂ

<div id="thunderphone"></div>

<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  var container = document.getElementById('thunderphone')

  ThunderPhone.mount({
    element: container,
    publishableKey: 'pk_live_your_publishable_key',
  })
</script>

WordPress / CMS ਇੰਟੀਗ੍ਰੇਸ਼ਨ

ਇਸਨੂੰ ਕਸਟਮ HTML ਬਲਾਕ ਜਾਂ ਆਪਣੀ ਥੀਮ ਦੇ ਫੁੱਟਰ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ:

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>

<div id="thunderphone-widget"></div>
<script>
  ThunderPhone.mount({
    element: '#thunderphone-widget',
    publishableKey: 'pk_live_your_publishable_key',
  })
</script>

ਸਮੱਸਿਆ-ਨਿਵਾਰਣ

ਵਿਜੇਟ ਦਿਖਾਈ ਨਹੀਂ ਦੇ ਰਿਹਾ

ਯਕੀਨੀ ਬਣਾਓ ਕਿ CSS ਅਤੇ JS ਦੋਵੇਂ ਫ਼ਾਈਲਾਂ ਲੋਡ ਹੋਈਆਂ ਹਨ। ਨੈੱਟਵਰਕ ਗਲਤੀਆਂ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਕੰਸੋਲ ਦੀ ਜਾਂਚ ਕਰੋ। ThunderPhone.mount() ਕਾਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਪੁਸ਼ਟੀ ਕਰੋ ਕਿ ਟਾਰਗੇਟ ਐਲੀਮੈਂਟ DOM ਵਿੱਚ ਮੌਜੂਦ ਹੈ।

ThunderPhone ਪਰਿਭਾਸ਼ਿਤ ਨਹੀਂ ਹੈ

ਸਕ੍ਰਿਪਟ ਹਾਲੇ ਲੋਡ ਨਹੀਂ ਹੋਈ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ widget.js ਲਈ <script> ਟੈਗ ਤੁਹਾਡੀ ਮਾਊਂਟ ਕਾਲ ਤੋਂ ਪਹਿਲਾਂ ਆਵੇ, ਜਾਂ ਮਾਊਂਟ ਕਾਲ ਨੂੰ DOMContentLoaded ਲਿਸਨਰ ਵਿੱਚ ਰੱਖੋ।

ਡੋਮੇਨ ਦੀ ਇਜਾਜ਼ਤ ਨਹੀਂ ਹੈ ਗਲਤੀ

app.thunderphone.com ਉੱਤੇ ਡਿਵੈਲਪਰਜ਼ ਸੈਟਿੰਗਾਂ ਵਿੱਚ ਆਪਣੇ ਡੋਮੇਨ ਨੂੰ ਮਨਜ਼ੂਰਸ਼ੁਦਾ ਡੋਮੇਨਾਂ ਦੀ ਸੂਚੀ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ। ਯਾਦ ਰੱਖੋ ਕਿ localhost ਨੂੰ ਹਮੇਸ਼ਾ ਇਜਾਜ਼ਤ ਹੁੰਦੀ ਹੈ।

ਅਗਲੇ ਕਦਮ

ਸਟਾਈਲਿੰਗ

CSS ਕਸਟਮ ਪ੍ਰਾਪਰਟੀਜ਼ ਨਾਲ ਵਿਜੇਟ ਦੀ ਦਿੱਖ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ।

React ਕੰਪੋਨੈਂਟ

React ਵਰਤ ਰਹੇ ਹੋ? ਕੰਪੋਨੈਂਟ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਹੋਰ ਸੌਖਾ ਹੈ।