Embed a YouTube Video In Your Kustomer Knowledge Base

Kustomer provides your business with tools to manage your customer interactions across many channels. One of the key features of Kustomer is the ability to create a Knowledge Base, which can be used as a repository of information that can help customers find answers to their questions. Embedding a video in a Kustomer knowledge base article or on your homepage can help make your content more engaging and informative. In this blog post, we’ll review the steps to embed a YouTube video in a Kustomer knowledge base article, as well as how to embed it on the homepage of your organization’s knowledge base. 

Embedding a YouTube Video in a Kustomer Knowledge Base Article

Step 1: Upload a video to YouTube that you want to embed

You can do this by creating a channel on YouTube and uploading a video 

Step 2: Copy the Embed Link

Once the video is uploaded, click on the ‘Share’ button underneath the video player. This will bring up a menu with several sharing options. Click on the ‘Embed’ option, and you will see a code snippet. Within that snippet, you can find the ‘src’ URL. Copy that URL

Step 3: Add the Embed Link to the Kustomer knowledge base article

Next, go to your Kustomer knowledge base article and open the editor. Navigate your cursor to where you want the video within the article. At the top of the editor, you will see a video camera icon. Click on that icon, and paste the URL into the input box. You should now see the YouTube video play in your article. 

Step 4: Preview and publish your article

Once you add the video to the article, you should preview it to make sure the video is displaying correctly and in the right place within your article. If everything looks good, you can publish your article and the YouTube video will be embedded and playable directly within the article. 

Embedding a YouTube Video on the Kustomer Knowledge base Homepage

Step 1: Find the embed code

To embed a YouTube video on the Kustomer knowledge base homepage, you will first need to find the embed code for the video you would like to display. You can do this following the same steps as step 2 above, however instead of just copying the link, you will need to copy the entire block of code.

Step 2: Go to your Knowledge Base Theme’s code editor and create a new draft

Within your Knowledge Base Theme you have the option to directly edit the front end code, you’ll need to make some modifications there to get a video embedded on the homepage. When you create a new draft using the code editor, you will be prompted with an alert that you are now no longer getting updates when Kustomer makes changes to the default theme. Once accepting, any updates to the global default theme will be skipped for your organization’s theme. You can create and modify a new Knowledge Base theme first if you would like to keep your current organization's theme tracking with the default version while you test.

Step 3: Paste Embed Code in the SearchHeaderWithSuggestions.jsx component

Within the render function of the SearchHeaderWithSuggestions Class, the returned values include all elements being shown on the front end. You can paste the embed code directly after the form element.






               <label htmlFor='searchInput' hidden>

                 <Snippet id='sn.kustomer.search' />


               <i className='icon-search mdi mdi-magnify' aria-hidden='true'></i>





             <iframe width='560' height='315' src='YOUR_VIDEO_EMBED_URL' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' allowfullscreen></iframe>


Now you can save the draft and preview. If you are modifying the default knowledge base theme, you might notice that some of the styling doesn’t look great. 

Step 4: Modifying the CSS in the styles.css file

Once the video is on the page, the box sizing of your knowledge base will now not align with the content of what’s inside the box on your homepage. We can fix this by modifying the “nav-main-text” class within the styles.css file. We’ll notice the height is set to be 400 pixels. Furthermore, we can change the height to now be “fit-content” and the min-height to be “400px”. Now, when the class is used in other places if the content is smaller than 400 pixels, it will still fill 400 pixels of space on the screen. 

Step 5: Preview and save your theme

Once you like the look of where your video is on the homepage, you should preview it to make sure the video is displaying correctly. If everything is working properly, you can publish your theme and the YouTube video will be embedded and playable from the homepage of that theme. 

Embedding a YouTube video in a Kustomer knowledge base is a great way to keep your clients engaged and informed when they view your content. By following the steps outlined above, you can easily embed YouTube videos into your Kustomer knowledge base content.