Embedding code

2018-03-28 19:41:00.0
Website management

Embedding code

Often you'll want to embed widgets from other services, eg videos from youtube, maps from google maps, etc. For most of these there are built in Kademi components to make life easy, but when there is no special component you can still just drop in a code snippet, referred to as "embedding"

Below we'll walk through an example based on crowdcast.io. This is a webinar service but there is no Kademi app for it, so we'll use a code block component to embed the code from the crowdcast site.

Step 1 - Create the webinar

For this example you'll need to register with crowdcast.io and follow the tour to create your first event

Step 2 - Get the embed code

Once you've created the crowdcast event you use the "Share" button to get the HTML code to insert into your Kademi account

Step 3 - Install the extra components app in your Kademi website

We need to use the "code block" component which comes in an app called "Extra Components"

Open your website manager, then click through to the market place, and install the Extra Components app

Step 4 - Add the code block to your page

If you havent already done so, open the page you want to embed the widget on in KEditor.

Then locate the code block component in the KEditor components tab

Step 5 - Paste the embed code into the code block component

Add a container to your page. In this example i've added a 2-column container.

Then drag and drop the code block component into one of the container cells. I've put it in the left.

Once added, hover your mouse over the component to get the component toolbar, and click the cog icon to open the component settings.

Then click "Edit source code", and paste the HTML embed code in the popup

 

Step 6 - Save the component and page

Then press the save button to save the component, and you should then see the widget in your page editor.

Also be sure to press the page save button (or use Control S)

Step 7 - Add some explanatory content

You will usually want to add some information about whatever you've just embedded.

Since i've used a 2 column container with the widget in the left I'll add content to the right

Finished

And here's your lovely new page