Question 1

What is the Malcolm! widget and how do I implement it?

Accepted Answer

The Malcolm! widget is a great way to put your content in front of users. By using the widget you can float content over an existing website or application. Want to let your users find out answers to FAQs about a product or service you provide but don't want them to make them navigate from the screen they are on? The Malcolm! widget is what you need. Or perhaps you'd like to float a feedback or get in touch form over your website? Super easy to do with the Malcolm! widget. You can even make the content displayed contextual to the screen the widget is floating over. How cool is that?

We recommend you place the Malcolm! widget embed code on every page of your website. You can then configure whether the widget displays or not (and what it displays) from within MyMalcolm!

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/HwJyEPPI3q/resources/IdGAskGCq2/widget-fb%402x.png (The Malcolm! Widget)

Here is how to start using the Malcolm! widget.

Step 1: Create an embed

Go the Share section of MyMalcolm and select the Embed tab and then Create an embed. Select Widget as the type of embed you want to create.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/HwJyEPPI3q/resources/Ji7YZa6eF7/screenshot-my.malcolm.app-2019.11.05-11_16_34.png (Create an embed in MyMalcolm)

Give your embed a name.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/HwJyEPPI3q/resources/zZgVvihFmE/screenshot-my.malcolm.app-2019.11.05-13_14_38.png (Names your embed in MyMalcolm)

Step 2: Choose your content

From this area you can choose a single FAQ or Workflow to display in the widget, or you can choose collections of content. These collections can be a category, a tag or an author. You can also make a collection out of a search result including a search that is contextual to the meta content of the page that the widget is on - you can query content based on the page title, meta keywords, meta description or a meta search tag.

Users can navigate content within the widget via clicking on items in the user interface eg categories, tags or authors.

If you don't choose a specific FAQ, Workflow or collection of content the default content displayed will be the most popular content.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/HwJyEPPI3q/resources/jbX8ylorUd/screenshot-my.malcolm.app-2019.11.05-13_16_07.png (Choose the content for your widget)

Step 3: Configure the visual style of your widget

You can configure various options about the visual appearance and behaviour of your widget. The options include what the widget looks like in it's pre-expand state (a button or a drawer), the text used on the pre-expand, the colours and logo plus the location of the widget on your screen. You can also configure whether you want the search and footer used on expanded widget and whether the transition from pre-expand to post-expand and vice versa are animated or not.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/HwJyEPPI3q/resources/UEdVkI4MOo/screenshot-my.malcolm.app-2019.11.05-13_16_42.png (Configure the visual style of your widget)

Step 4: Set up URL rules and visibility settings

We recommend you put the Malcolm! widget embed code on every page of your website. But you might not want the widget to appear on every page. Using URL rules you can mangage and easily change which pages the widget does appear on from within MyMalcolm!

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/HwJyEPPI3q/resources/rVDvNjLQrJ/screenshot-my.malcolm.app-2019.11.05-13_17_22.png (Manage URL rules for your widget)

You may not want the widget to display on mobile browsers, or you may want the widget to only appear at certain times (for example when your office is closed) - you can configure these options in visibility settings.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/HwJyEPPI3q/resources/GWsPKq5LZ4/screenshot-my.malcolm.app-2019.11.05-13_19_13.png (Manage your widget visibility settings)

Step 5: Publish and place code on site

Finally when you are happy publish your widget.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/HwJyEPPI3q/resources/g4why3UaJ5/screenshot-my.malcolm.app-2019.11.05-13_20_01.png (Publish your embed)

Finally collect your code - you can cut and paste this or have it emailed to you (or the person who is responsible for implementation).

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/HwJyEPPI3q/resources/KyYO8MKguT/screenshot-my.malcolm.app-2019.11.05-13_47_41.png (Collect your widget embed code)

If you use Google Tag Manager you can also deploy the embed code via this system. See here for more details.

Question 2

How can I listen to JavaScript events posted from embeds?

Accepted Answer

Malcolm! embeds fire events on user interactions such as when someone first reads an FAQ, completes a Workflow or performs a search. These events can be picked up on your web page for you to perform custom actions - for example creating an event for your Analytics.

How can I listen to these events?

The first event, mapiload, is fired on the window when the mapi.js library has loaded.

The embeds are then rendered followed by the mapi.onrender event.

To register a listener use the mapi.on function.

We recommend combining the window.addEventListener and mapi.on functions for maximum compatibility especially if your application uses JavaScript page transitions, however if your application reloads the page on each request you could combine these into one.

Once the embeds have rendered use the embed.on function to register listeners.

If you know the ID of the embed (can be found in MyMalcolm) use mapi.findEmbed function.

Alternatively loop through the mapi.embeds array.

Putting it all together your code snippet could look something like this.

What events are available?

Question 3

Can I put Malcolm! Widget code into another site via Google Tag Manager?

Accepted Answer

If you are using Google Tag Manager on a site or application it is very easy to deploy the Malcolm! widget into that property via GTM.

Here is a step by step guide:

Set up your widget in the Share section of MyMalcolm (there is a guide here) and copy the embed code to your clipboard
In GTM click "Add a new Tag"
In Tag Configuration select a "custom HTML" tag type
Paste in the embed code from your clipboard
You don't need to support document.write
For your trigger use page view on all pages (assuming you want the widget to appear on all pages)

What is the Malcolm! widget and how do I implement it?

How can I listen to JavaScript events posted from embeds?

Can I put Malcolm! Widget code into another site via Google Tag Manager?

Upgrade your content

Hey there!