# Adding How-to Videos and Guidelines for content editors in Umbraco

While doing some work for a Charity in Australia, the client made a request to have some how-to videos displayed within the CMS.  
The client had some advanced editors who were willing to record the videos and write down the guidelines.  
Now they needed a way it could be displayed on the Umbraco back-office and updated by those advanced editors in the future.  
  
This is the solution I came up with.  

*   Create a Google Slides presentation with the guidelines and how-to videos. This Google Slides presentation can be later edited by anyone who has access to it.  
    (PS: I tried Google Docs, but it didn't support video embedding)
*   Use **File » Publish to the web » Embed** option and copy the Embed code from there.

## For a tab on the dashboard of the content section

1.  Create a new "Editor Help" tab within the Content Area using the instructions from here: [https://our.umbraco.org/documentation/extending/dashboards/](https://our.umbraco.org/documentation/extending/dashboards/)
2.  Here's my code sample for adding into ~/config/Dashboard.config:  
```
<section alias="StartupHelpSection">
    <areas>
        <area>content</area>
        <area>default</area>
    </areas>
    <tab caption="Editor Help">
        <control>
            ~/App_Plugins/Spire.Custom/views/helpdashboardintro.html
        </control>
    </tab>
</section>
```
3.  Create a view with the Embed code in it.  
    Code sample:  
```
<div class="umb-dashboard-grid">
    <div style="max-width: 1200px">
        <h3><strong>How-to videos & Guidelines</strong></h3>
        <p style="font-size: 16px; line-height: 1.5; margin-bottom: 30px; max-width: 760px;">
            <span>Here's some information to get you started.</span>
        </p>

        <div class="row">
            <iframe src="https://docs.google.com/presentation/d/13hdjSb-LNJBwcSqXY-NUZgKgexS4ZcfHsu6F9Gguqcs/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
        </div>
    </div> 
</div>
```
    

## For a tab on given document types:

1.  Install the "Inline Html Help Label" (ProWorksInlineHtmlHelpLabel) package from here: [https://our.umbraco.org/projects/backoffice-extensions/inline-html-help-label](https://our.umbraco.org/projects/backoffice-extensions/inline-html-help-label)
2.  Add another tab to the document type and name it as "Editor Help"
3.  Add a property named Help with an "HTML Inline Help Label" editors
4.  In the HTML to display, add some HTML with the Embed code in it:  
    See my code snippet below:  
```
<h3><strong>How-to videos & Guidelines</strong></h3>
<p><span>Here's some information to get you started.</span></p>
<iframe src="https://docs.google.com/presentation/d/1R-PTnDRf0mzsSbAyQVbkDrYRP9cjmW4Z6nhxe3Grl2I/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
```  
  
That's all there is for the setup from a developer's perspective. Now an editor who has access to the Google Slides presentation could update it anytime and it will appear within the CMS back-office with no further intervention from the developer.  
  
See a walkthrough video of how it was all put together.  
  
%[https://www.youtube.com/watch?v=BMRyKylWIVI]
  
This concept could be used with other CMS back-offices as well. Give it a try and leave me a comment.

---

*This article was originally written on Google's Blogger platform and ported to Hashnode on 17 Sep 2022.*