Я пытаюсь выяснить, как написать этот виджет Freshdesk как пользовательский компонент. Я думал, что форма будет работать, но я понятия не имею, как «подключить» форму к тому, что происходит с iframe. Должен ли я использовать вызов AJAX? Так работают эти виджеты iframe?
const buildCustomQuery = (customText, prepopulatedFields) => {
const customizerQueries = [
...Object.entries(customText).map(([key, value]) => `${key}=${value}`),
...Object.entries(prepopulatedFields)
.filter(([, value]) => value)
.map(([key, value]) => `helpdesk_ticket[${key}]=${value}`),
]
return customizerQueries.length ? `&${customizerQueries.join(';')}` : ''
}
function FreshdeskWidget({ subject, error, sentryId, description }) {
const profile = getProfile()
const sentry = sentryId && `Sentry ID: ${sentryId}`
const joinedDescription = [sentry, description, error]
.filter(item => item)
.join(' \u2014 ')
const customText = {
widgetType: 'embedded',
formTitle: 'Report+an+Issue',
submitTitle: 'Request+Support',
submitThanks:
'//SUBMIT MESSAGE',
screenshot: 'No',
captcha: 'yes',
}
const prepopulatedFields = {
requester: profile && profile.email,
subject,
description: joinedDescription,
}
return (
<>
<script
type="text/javascript"
src="// FRESHDESK JAVASCRIPT LINK"
/>
<style type="text/css" media="screen, projection">
{
'@import url(//FRESHDESK CSS LINK); '
}
</style>
<iframe
title="Feedback Form"
className="freshwidget-embedded-form"
id="freshwidget-embedded-form"
src={
config.support.url + buildCustomQuery(customText, prepopulatedFields)
}
scrolling="no"
height="500px"
width="100%"
frameBorder="0"
/>
</>
)
}