What are Containers?

Containers in UserGuiding are JavaScript code snippets that are used to integrate web applications with UserGuiding.

By embedding a single container code inside your application's source code, preferably to the head section, you can start utilizing UserGuiding as a third-party onboarding tool.

Later, each content you create such as guides, hotspots, checklists, etc. can be placed inside the embedded container code, be displayed within you we app.

Integrate UserGuiding with your Product - Video Tutorial

How does Container work?

To learn how Containers work, you watch the below video.

Where to find Containers?

When you log into panel.userguiding.com, find the Containers Tab under the Settings in the left-hand menu. If you click on, you will arrive in the containers page.

Here, you will find a "Default" container, ready to be embedded in your web application.

Important: If you want to integrate UserGuiding with more than one platform, you can use different container codes for separate platforms.

To create a new container code, you need to click on orange-colored +CREATE A CONTAINER button.

When creating a Container;

  • You should name your Containers first,
  • When you are done, we will provide you a small JavaScript code snippet.

Code Embedding: Is the status telling you whether you have embedded the container code successfully. If yes, you'll see a blue check mark under it.

Code: Click on </>Show button to see your unique container code.


Example Use-case:

You can embed different containers into your staging and prod environments. This way, you can test your guides, hotspots, etc. by placing them first inside the staging container code.

Afterward, when you're ready to go live, you can move these guides and hotspots from staging to your prod environment simply by changing their container code as well as their targeting and flow settings.

Ps: We recommend you to use your domain URL as the container name. It will be easy to remember later on, when you're designating a container to a guide, hotspot or a checklist.

How to Embed the Container Code?

  • If this is your first visit to the containers page, to see the Default container, click on </>Show.
  • Here it is your default container code containing a unique ID.
  • You can either copy the code directly to paste it to the head section of your application's source code.
  • Or, you can use Google Tag Manager to embed it easily.

To learn how to embed the container code with Google Tag Manager, you can check this article out.

And, to learn how to embed a container code into your software's source code by directly copying and pasting it to the head section, you can read this article containing a tutorial video regarding this matter at the end.

  • Or, you can send it to your developer friend to embed it via the second option below.

Related Articles:
How many containers can I add?
How do I set GTM trigger to load UserGuiding tag only on the pages I want?

Did this answer your question?