{"id":28072,"date":"2022-07-13T07:42:45","date_gmt":"2022-07-13T07:42:45","guid":{"rendered":"http:\/\/feedback-form-trigger-from-video-events-in-nextjs"},"modified":"2022-07-13T07:42:45","modified_gmt":"2022-07-13T07:42:45","slug":"feedback-form-trigger-from-video-events-in-nextjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/","title":{"rendered":"Feedback Form Trigger from Video Events in Next.js"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Videos can be considered one of the most successful marketing tool as they outperform text posts and static images in terms of engagement. It may appear harsh, but it is the reality of today\u2019s business environment. An effective user review of a video can make or break sales.<\/p>\n<p>Consumers want social proof of products and services more than ever, and it\u2019s a good business practice to prioritize and capitalize on those user reviews.<\/p>\n<p>This article demonstrates how to generate user reviews from feedback forms triggered by video events in Next.js.<\/p>\n<h3>CodeSandbox and Github<\/h3>\n<p>The completed project is on <a href=\"https:\/\/codesandbox.io\/s\/wizardly-swirles-vwji2u\">CodeSandbox<\/a>. Fork it to get started quickly.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/wizardly-swirles-vwji2u?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"Feedback form trigger from video events in Nextjs\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><p>The source code is on <a href=\"https:\/\/github.com\/ugwutotheeshoes\/video-trigger-next\">Github<\/a>.<\/p>\n<h3>Prerequisite<\/h3>\n<ul>\n<li>Adequate knowledge of JavaScript and React.js<\/li>\n<li>Knowledge of Next.js is preferred, but not required.<\/li>\n<li>A Cloudinary account is also needed \u2014 sign up <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">here<\/a>.<\/li>\n<\/ul>\n<h3>Getting Started with Next.js<\/h3>\n<p><a href=\"https:\/\/nextjs.org\/\">Next.js<\/a> is a React-based framework with pre-rendering, automatic code-splitting for faster page loads, and API routes to build API endpoints with serverless functions for back-end features.<\/p>\n<p>Created by <a href=\"https:\/\/vercel.com\/\">Vercel<\/a>, Next.js is open source based on <a href=\"https:\/\/nodejs.org\/\">Node.js<\/a> and <a href=\"https:\/\/babeljs.io\/\">Babel <\/a>\u2014 and also integrates with React to create single-page apps.<\/p>\n<h3>Project Setup and Installation<\/h3>\n<p>To create a new project, we\u2019ll run the following command in our terminal:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    npx create-next-app <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">project-name<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Navigate into the project directory and install Cloudinary React SDK dependency.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    cd <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">project-name<\/span>&gt;<\/span>\n    npm install cloudinary-react\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Running <code>npm run dev<\/code> will start the development server by default at <code>http:\/\/localhost:3000<\/code> in our browser.<\/p>\n<h3>Setting Up a Video in Cloudinary<\/h3>\n<p>After successfully creating an account, Cloudinary will redirect us to our account\u2019s dashboard page where we can upload the demo video.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/8af378c234ad4640d7e5f27211b9be6fb6018354-1366x663.png\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1366\" height=\"663\"\/><\/p>\n<p>Click on the \u201cUpload\u201d button above and select the video file to be uploaded.<\/p>\n<h3>Building the Feedback Form<\/h3>\n<p>To build the feedback form, we\u2019ll create a new file called <code>Form.js<\/code> and set up some state variables to store the value of the form\u2019s input elements anytime the value changes.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-keyword\">const<\/span> form = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n      <span class=\"hljs-keyword\">const<\/span> &#91;name, setName] = useState(<span class=\"hljs-string\">\"\"<\/span>);\n      <span class=\"hljs-keyword\">const<\/span> &#91;review, setReview] = useState(<span class=\"hljs-string\">\"\"<\/span>);\n       <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"hljs-comment\">\/\/ form<\/span>\n     )};\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> form;\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We\u2019ll head on to create a form that consists of a button and two input elements; one for the user and the other for the user\u2019s feedback. The input elements are assigned to the state variables shown in the code snippet above.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"form\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n          name:\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n            <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span>\n            <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{name}<\/span>\n            <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{(e)<\/span> =&gt;<\/span> setName(e.target.value)}\n          \/&gt;\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n          Video review:\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">textarea<\/span>\n            <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span>\n            <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{review}<\/span>\n            <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{(e)<\/span> =&gt;<\/span> setReview(e.target.value)}\n          \/&gt;\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span>&gt;<\/span> submit <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3>Implementing the Video Player<\/h3>\n<p>Import the required components from Cloudinary React SDK to <code>pages\/index.js<\/code> to embed the video player in our demo application.<\/p>\n<pre><code>import {Video, CloudinaryContext} from 'cloudinary-react';\n<\/code><\/pre>\n<p>Then, in the <code>CloudinaryContext<\/code> component, apply the Cloud name from our Cloudinary account details on the dashboard page and also include the name of the video in the Video component:<\/p>\n<pre><code> &lt;main className={styles.main}&gt;\n        &lt;h1 className={styles.title}&gt;\n          Feedback form trigger from video events in Next.js\n        &lt;\/h1&gt;\n    &lt;CloudinaryContext cloud_name=&quot;OUR-CLOUD-NAME&quot;&gt;\n      &lt;div&gt;\n          &lt;Video\n            publicId=&quot;OUR-VIDEO-ID&quot;\n            width=&quot;850px&quot;\n            height=&quot;450px&quot;\n            controls\n            onPlay={playFunction}\n            onEnded={endFunction}\n          \/&gt;\n        &lt;\/div&gt;\n      &lt;\/CloudinaryContext&gt;\n    &lt;\/main&gt;\n<\/code><\/pre>\n<p>As shown above, we\u2019ll also apply some configuration parameters to the video. Each of the parameters does the following:<\/p>\n<ul>\n<li>\n<code>publicId<\/code> &#8211; Holds the name of the demo video<\/li>\n<li>\n<code>width<\/code> and <code>height<\/code> &#8211; Displays the video with a width of 850px and a height of 450px<\/li>\n<li>\n<code>controls<\/code> &#8211; Gives the video a set of controls such as play, pause, skip, fullscreen, etc.<\/li>\n<li>\n<code>onPlay<\/code> &#8211; Triggers a function when the video starts.<\/li>\n<li>\n<code>onEnded<\/code> &#8211; Triggers a function after the video finishes.<\/li>\n<\/ul>\n<p>After configuring the video player, our demo application will look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/b28aefee676c7e99e416864ca1873c88b1f0a705-1349x663.png\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1349\" height=\"663\"\/><\/p>\n<h3>Displaying our Feedback<\/h3>\n<p>With the video player fully functional, set up a state variable called <code>form<\/code> in the <code>index.js<\/code> file to control the display of the feedback form.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-keyword\">const<\/span> &#91;form, setForm] = useState(<span class=\"hljs-literal\">false<\/span>);\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The <code>onPlay<\/code> and <code>onEnded<\/code> props in the Cloudinary video player are assigned to functions that enable the form visibility. The <code>onEnded<\/code> prop shows the form immediately after the video ends, and the <code>onPlay<\/code> prop hides the form when the video starts playing.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-keyword\">const<\/span> playFunction = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n        setForm(<span class=\"hljs-literal\">false<\/span>);\n      };\n      <span class=\"hljs-keyword\">const<\/span> endFunction = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n        setForm(<span class=\"hljs-literal\">true<\/span>);\n      };\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Then, we\u2019ll declare a condition to display the feedback form only if the state variable <code>form<\/code> is <code>true<\/code>.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.main}<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.title}<\/span>&gt;<\/span>\n              Feedback form trigger from video events in Next.js\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n        \/\/ Cloudinary video player\n          {form &amp;&amp; <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Form<\/span> \/&gt;<\/span>}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Next, we\u2019ll head on to the <code>Form.js<\/code> file to create an alert for the response of the form once it\u2019s submitted. We\u2019ll also reset our input elements.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-keyword\">const<\/span> handleSubmit = <span class=\"hljs-function\">(<span class=\"hljs-params\">event<\/span>) =&gt;<\/span> {\n        event.preventDefault();\n        alert(<span class=\"hljs-string\">`<span class=\"hljs-subst\">${name}<\/span> said \"<span class=\"hljs-subst\">${review}<\/span>\"`<\/span>);\n        setName(<span class=\"hljs-string\">\"\"<\/span>);\n        setReview(<span class=\"hljs-string\">\"\"<\/span>);\n      };\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>After all the configurations, the demo application will look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/f7eb79a9272667921e27a462db20a9aa79485897-600x295.gif\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"600\" height=\"295\"\/><\/p>\n<h3>Conclusion<\/h3>\n<p>This article discusses rendering a feedback form to get user feedback once a video ends.<\/p>\n<h3>Resources<\/h3>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/react_quick_start\">Cloudinary React SDK Documentation<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28073,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,382,371],"class_list":["post-28072","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-player-video","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Feedback Form Trigger from Video Events in Next.js<\/title>\n<meta name=\"description\" content=\"This article demonstrates how to generate user reviews from feedback forms triggered by video events in Next.js.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Feedback Form Trigger from Video Events in Next.js\" \/>\n<meta property=\"og:description\" content=\"This article demonstrates how to generate user reviews from feedback forms triggered by video events in Next.js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-13T07:42:45+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925486\/Web_Assets\/blog\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Feedback Form Trigger from Video Events in Next.js\",\"datePublished\":\"2022-07-13T07:42:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925486\/Web_Assets\/blog\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Player Video\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/\",\"name\":\"Feedback Form Trigger from Video Events in Next.js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925486\/Web_Assets\/blog\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27.jpg?_i=AA\",\"datePublished\":\"2022-07-13T07:42:45+00:00\",\"description\":\"This article demonstrates how to generate user reviews from feedback forms triggered by video events in Next.js.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925486\/Web_Assets\/blog\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925486\/Web_Assets\/blog\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27.jpg?_i=AA\",\"width\":5568,\"height\":3712},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Feedback Form Trigger from Video Events in Next.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Feedback Form Trigger from Video Events in Next.js","description":"This article demonstrates how to generate user reviews from feedback forms triggered by video events in Next.js.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/","og_locale":"en_US","og_type":"article","og_title":"Feedback Form Trigger from Video Events in Next.js","og_description":"This article demonstrates how to generate user reviews from feedback forms triggered by video events in Next.js.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-07-13T07:42:45+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925486\/Web_Assets\/blog\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/"},"author":{"name":"","@id":""},"headline":"Feedback Form Trigger from Video Events in Next.js","datePublished":"2022-07-13T07:42:45+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925486\/Web_Assets\/blog\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27.jpg?_i=AA","keywords":["Guest Post","Player Video","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/","name":"Feedback Form Trigger from Video Events in Next.js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925486\/Web_Assets\/blog\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27.jpg?_i=AA","datePublished":"2022-07-13T07:42:45+00:00","description":"This article demonstrates how to generate user reviews from feedback forms triggered by video events in Next.js.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925486\/Web_Assets\/blog\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925486\/Web_Assets\/blog\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27.jpg?_i=AA","width":5568,"height":3712},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-nextjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Feedback Form Trigger from Video Events in Next.js"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925486\/Web_Assets\/blog\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27\/f7b6588579c877f4280694481d37c3f7dc5d7330-5568x3712-1_28073c6c27.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28072"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28072\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28073"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}