தொடங்குங்கள்

CDN / ஸ்கிரிப்ட் குறிச்சொல்

CDN பில்ட் React-ஐ உள்நிலையாக தொகுக்கிறது; எனவே நிலையான தளங்கள், WordPress, Webflow அல்லது HTML சேர்க்கக்கூடிய எந்தப் பக்கத்திலும் விட்ஜெட்டை பயன்படுத்தலாம். npm, bundler அல்லது framework தேவையில்லை.

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>

விட்ஜெட் இலக்கு உறுப்பில் mount ஆகி, viewport-இன் ஒரு மூலையில் நிலையான-நிலை பட்டையாக ரெண்டர் செய்யப்படும் (இயல்புநிலை bottom-right; position விருப்பத்தால் கட்டுப்படுத்தப்படுகிறது). Mount உறுப்பு React root மட்டுமே -- பக்கத்தில் அதன் இருப்பிடம், விட்ஜெட் எங்கு தோன்றும் என்பதைப் பாதிக்காது.

Mount விருப்பங்கள்

ThunderPhone.mount() ஆனது React component-இன் அதே விருப்பங்களையும், element பண்பையும் ஏற்கிறது:

விருப்பம்வகைஅவசியம்இயல்புநிலைவிளக்கம்
elementstring | HTMLElementஆம்--CSS selector (எ.கா., '#thunderphone') அல்லது DOM உறுப்பு குறிப்பு.
publishableKeystringஆம்--வெளியிடக்கூடிய API விசை (pk_live_...). விசையின் விட்ஜெட் உள்ளமைவிலிருந்து ஏஜென்ட் தானாகத் தீர்மானிக்கப்படும்.
theme'light' | 'dark'இல்லை'light'வண்ணத் திட்டம்.
primaryColorstringஇல்லை'#000000' (ஒளி) / '#ffffff' (இருள்)accent வண்ணமாகப் பயன்படுத்தப்படும் CSS வண்ண string.
titlestringஇல்லை'Voice assistant'விட்ஜெட் பட்டையில் காட்டப்படும் உரை.
position'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'இல்லை'bottom-right'நிலையான viewport நிலை.
apiBasestringஇல்லை'https://api.thunderphone.com/v1'API அடிப்படை URL override.
languagestringஇல்லை--ஒவ்வொரு session-க்குமான மொழி override -- en, es, அல்லது fr-FR போன்ற மொழிக் குறியீடு அல்லது locale. அமைக்கப்படாதபோது, ஏஜென்டின் உள்ளமைக்கப்பட்ட மொழி பயன்படுத்தப்படும்.
voicestringஇல்லை--ஒவ்வொரு session-க்குமான குரல் override -- maria போன்ற குரல் பெயர். அமைக்கப்படாதபோது, ஏஜென்டின் உள்ளமைக்கப்பட்ட குரல் பயன்படுத்தப்படும்.
contextstringஇல்லை--ஏஜென்டிற்கு அனுப்பப்படும் ஒவ்வொரு session-க்குமான உண்மைத்தகவல் பக்கம் அல்லது தள context. சர்வர் பக்கத்தில் 12,000 எழுத்துகளாகக் குறைக்கப்படும்.
onConnect() => voidஇல்லை--குரல் session இணைக்கப்படும்போது அழைக்கப்படும்.
onDisconnect() => voidஇல்லை--session முடிவடையும்போது அழைக்கப்படும்.
onError(error) => voidஇல்லை--பிழைகள் ஏற்பட்டால் அழைக்கப்படும். பிழையில் error (குறியீடு) மற்றும் message புலங்கள் உள்ளன.
ringtoneboolean | stringஇல்லைfalseஇணைக்கும்போது ரிங்டோனை இயக்கவும். இயல்புநிலை ரிங்டோனுக்கு true, அல்லது தனிப்பயன் ஆடியோவுக்கு URL string.

சுத்தம் செய்தல்

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 பயன்படுத்துகிறீர்களா? கூறு ஒருங்கிணைப்பு எளிமையானது.