# Sites

This is where you need to go to create digital channels within the platform. In this case, the operation of sites involves all the development, design, and navigation flow. If you want to add content to each of them, it must be added in the Content section.

Upon entering, you will see that there are 4 statuses:

  • Enabled: Default state of functioning online digital channels and newly created Sites.
  • Hidden: Sites created that only users with access can see.
  • Development: Sites only accessible by backend users who are working on them.
  • Disabled: Sites that have been disabled.
  • Copy: Creates a copy of the site and all the published elements of it.

To create a site, you just have to click on the New tab, which will allow you to designate the name and host, and then select a base template for the site's appearance and structure.

After that, you can see it with the status "Enabled", which means that it is online to work.

Warning

In the site index, you will only be able to see sites where you are part of the team with a designated role.

# Site settings

Site settings allow you to open platform options, so that it is viewed differently by visitors, customers, developers, and site administrators. Additionally, you can modify options to improve the appearance in search engines and the visibility of some of the data that the public has access to when they reach the pages.

# General

Within this section you can configure the following data:

  • Site Name: The name of your site, this field is used as the default title for SEO purposes (this can be modified).
  • Description: A brief description of your site that is used as the default description for the SEO of the site (this can be modified).
  • Site Logo: An image that displays in the upper left as your site logo in the Navigation bar.
  • Language: The language of your site. This value is important because it impacts how content appears in your site when consuming it through Modyo Content.
  • Team Review
  • Time Zone: Selects the time zone that your date and time fields use within your site.
  • Google Tag Manager ID: Allows you to add a Google Tag Manager ID to easily install the scripts you need to use Google's event logging tool.
  • Favicon: Image that appears in the address bar.
  • Apple icon: Image that appears on mobile devices when using the site as an application.
  • Delete: This option allows you to permanently delete a site and all its elements.

Danger

Deleting is irreversible, be careful when executing this action. When you press the delete button, the system will ask you for the name of the site. You'll need to enter the text name of the site you're deleting before you can execute the action. Once the action is confirmed, you will not be able to access the site or its items again.

# Google Tag Manager

By default, the new Modyo themes include the snippets needed to automatically inject Google Tag Manager scripts into both the head and body of the sites. These snippets can be found in the snippets>general section of the Template builder and are embedded into both the head snippet and the home and base views.

If you have the latest theme available and still don't have these snippets, you can go to the "Themes" section in the upper right and click on the "Load templates" option in the "additional options". This option will load all the templates that have been added to the theme, but are not present in the version you have installed.

In case you have an old theme installed and do not have these snippets, you can access the code here to add them as custom snippets and easily embed Google Tag Manager to your site.

  1. Create a custom snippet with the following code and then embed the snippet in the site's head using {% snippet "gtm-head" %}, replacing "gtm-head" with the name you gave the snippet.

Google Tag Manager for the head

{% if site.tag_manager_id != '' %}

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','{{site.tag_manager_id}}');</script>
<!-- End Google Tag Manager -->

{% endif %}
  1. Create a custom snippet with the following code and then insert it into the body tags of the home and base views using {% snippet "gtm-body" %}, replacing "gtm-body" with the name you gave the snippet.

Google Tag Manager for the body

{% if site.tag_manager_id != '' %}

<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id={{ site.tag_manager_id }}" height="0" width="0"
style="display:none;visibility:hidden">
</iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->

{% endif %}

With this ready, when there's a value associated with the Google Tag Manager Identifier field in the General site settings, the scripts will be automatically injected and you'll be able to start creating events in Google Tag Manager to record your users' actions.

# Privacy

Restrictions allow you to configure the privacy of your site.

  • If the privacy level is set to public, then it is visible to everyone.
  • If the privacy level is set to private, then this site is only visible to users with an active session.
  • If the privacy level is set to private, but the option "Show home page to public visitors" is checked, then the home page is visible to everyone, while the rest of the site requires users with an active session.
  • If you reach a URL that does not exist within the site, you will receive a 404 response by default, but if you check this option, instead of receiving a 404, you will be redirected to the home page.

# SEO

SEO (Search Engine Optimization) is the key to appearing in different search engines. Users rely on a good SEO setup to get to the site.

The options listed in this section help improve your SEO across a particular channel:

  • Tagline: General description that appears in search results, listed under the name or "title" of your site.
  • Keywords: Associated words relevant to your site that users search for that appear in the keywords meta tag. Devalued by Google, this field is less relevant today, but may be used by other search engines.
  • Sitemap: This file allows search engines to better index the content of your site. Modyo automatically updates your sitemap file by default, but you can also modify it manually so that it focuses only on particular pages and content.
  • Robots.txt: This file is part of the robots exclusion protocol (REP), a group of web standards that regulate how robots crawl the web, access and index content, and serve that content up to users. In practice, this file determines whether certain user agents (web-crawling software) can or cannot crawl parts of a website. These crawl instructions are specified by "disallowing" or "allowing" the behavior of certain (or all) user agents. You can modify this file to provide custom instructions to site crawlers.

Tip

The robots.txt and sitemap.xml files are only visible on the site if you have a custom domain enabled. Otherwise, robots.txt and sitemap.xml are only defined at the account level with their default values and cannot be customized.

  • Meta tags: Allows you to set up meta tags for all your pages and configure the default values.

Tip

When you add a meta tag to all pages through your site's SEO settings, it will be added to the editable version of all pages so you'll have to publish each page for the new meta tags to take effect on your site.

Warning

Since the meta tags list is part of the site's configuration, only the site's administrators will be able to add meta tags for all pages. However, the site's developers will be able to add or remove meta tags and modify their values page by page.

# PWA

Modyo provides the ability to implement Progressive Web Applications (PWA) within your digital channels. To do so, you can find two main options to facilitate implementation.

# Manifest

The purpose of the manifest is to indicate how you want a browser to display your digital channel. On the platform, it is possible to activate it with the checkbox seen above. This will create the following route:

https://[domain]/[site-name]/manifest.json

The manifest must be implemented on each page where the PWA is developed, through the Template Builder, in the snippet head.

The manifest can be created and modified in the following field, allowing you to add changes without having to leave the view.

Warning

If you change the manifest, remember to save it with the Save button at the top of the screen so you don't lose the changes.

Warning

If you do not customize the manifest but add the route in the Template Builder, it will be blank and will not take any action.

# Service Worker

The Service Worker allows the digital channel to perform different actions or keep certain data connected within the cache to show some structure in case of a bad connection. The platform gives you the possibility to enable this through the second checkbox above. Thus, the following route will be created:

https://[domain]/[site-name]/serviceworker.js

You can modify and program the Service Worker in the next field, adapting it to your routes and with the available variables as shown above.

Warning

If the Service Worker is disabled, the page will continue to run only with its basic functions and not with the benefits that this option provides.

Warning

If the code is not customized or saved, the site will not have the features you are designing.

# Domains

The Domains section is where you configure where and how your site is publicly located. It is essential that each member of the platform be aware of any changes made here.

The options you configure here are:

  • Host: This name designates where your site is located within the server, e.g. the host name 'my-site' would be located at https://example.modyo.cloud/my-site. This option only accepts alphanumeric characters, and a few other valid non-space characters, such as dashes "-" and underscores "_".
  • Enable custom domains: Select this option if you have a registered custom domain, and want to configure it here. Make sure to follow the instructions in the description.
  • Enable SSL on this site: You are required to have a valid SSL certificate installed in order to enable this setting.
  • Primary domain: This is the main address of your site. Alternative domains redirect to this domain through HTTP 302.
  • Alternative domain 1 & 2: These secondary addresses redirect if the primary one fails.

Warning

Modyo has reserved domains that cannot be used as custom site domains:

  • education.modyo.com
  • elearning.modyo.com
  • training.modyo.com
  • capacitacion.modyo.com
  • support.modyo.com
  • soporte.modyo.com
  • developers.modyo.com
  • desarrolladores.modyo.com
  • www.modyo.com
  • es.modyo.com
  • pt.modyo.com
  • global.modyo.com

Warning

Modyo has reserved hosts for the sites, so you can't use them as hosts for your sites:

  • 404
  • 422
  • 500
  • activate
  • admin
  • api
  • auth
  • callback
  • code_generators
  • crossdomain
  • dist
  • login
  • logout
  • mailing
  • panel
  • password
  • profile
  • rails
  • realms
  • robots
  • session
  • signup
  • sitemap
  • status
  • uploads
  • users
  • welcome
  • widgets

# Stages

Adding stages to your site allows you to work on new features for your site without modifying what's already published.

The main advantages of having different stages on your sites is that it allows you to develop only for the current stage, without modifying what already exists on the site. These stages can create and use variables, widgets, and local templates to customize the experience or visualize changes. Upon completion of changes within a stage, they can be synchronized from the main stage.

Attention

When using stages, custom PWAs, and redirects will be disabled. You can only use these in the main stage.

# Add a new stage

To add a new stage to your site, follow these steps:

  1. From the side menu, click Channels, then select your Site.
  2. Expand Site Settings, click on Stages.
  3. Click on + New Stage
  4. Select what the base of the stage and type the name.
  5. Click Create.

Tip

When you have more than one stage on your site, the Overview page will now display the details of the current stage and a button to synchronize changes between stages.

In the sidebar you can see which stage you are currently in and when you click on the dropdown, it will display a list of all the stages of your site.

# Synchronize a stage

Once you've finished your tests on your stage, make sure you sync them to main. On the synchronizations screen, you will be able to see all the changes that were made between the two selected stages by clicking on View.

To synchronize a stage, follow these steps:

  1. From the side menu, click Channels, then select your Site.
  2. In Overview, in theSynchronization section, select the stage you want to synchronize.
  3. In the window that appears, you will see all the items with differences between the selected stages. Click View to see the details of what changed.
  4. Select the items you want to sync.
  5. Click Synchronize.

Tip

When you click on sync, you will be able to select which changes to take from another stage. That is, if you want to sync changes to main, you must be in main when you click sync.

Warning

You'll receive an alert if you try to sync changes that aren't published yet.

# Team Review

You can review and publish multiple elements of a site in a single view. To review the differences of an element, select it from the left list and the differences between the editable and published version will appear in the right section of the view.

If you want to publish multiple items in one step, you must press the “Publish” button from the pages, navigation, widgets, or templates and you must mark all the items you want to publish in the list and then press the button to publish again.

Warning

All items that have pending changes to be published will appear in the list, if any item does not appear in the list, it's because it has no changes yet to publish.

If you have team review enabled, only the items that are already approved will appear in the list.

In case you need to publish an element quickly, administrator users can skip the approval process by using the "Force publish" option, allowing the element to go directly to the published view.

# Team Members

The Team members section of your Site settings allows you to select eligible users from your main Team (set at the account level), and assign them roles to work under within your site. The basic role just includes editing privileges, and you can additionally include reviewing, publishing, and configuring site settings privileges.

To do this, the administrator who created the site must manually assign team members and their roles. Once the site creator adds other admins, these too can add more team members.

# Add a new member

To add a new member to your site, follow these steps:

  1. From the Modyo Platform main menu, expand Channels, and click your site.
  2. Expand Site Settings and click Team Members.
  3. Click the + Add Member button.
  4. Find the user you want to add to your site and select a role.
  5. Click Add.

You can modify the role of any of the associated administrators by clicking on their name. A modal will pop up, where you can select the new role. Tap Save to confirm the change.

To remove a team member, click the checkbox next to their name, and then the Delete button that appears at the bottom of the page.

The available roles are:

  • Developer: Can create, modify and submit pages, widgets, menu and templates for review.
  • Developer CLI: Can create, modify and submit pages, widgets, menu and templates for review. Can also push widgets to the platform from external applications.
  • Reviewer: Can create, modify, and submit pages, widgets, menu and templates for review and approval, as well as publish them when the correct review conditions are met.
  • Admin: Can create, modify, and submit pages, widgets, menu and templates for review and approval, as well as publish them without going through the validations of the team review if necessarty. Admins can also modify site configurations.

# Developer

Developers are in charge of the structural development of resources, design and the creation of or integration with content. Everything developers do has to go to review, or be directly published by a higher role.

This user cannot publish, delete, revert to previous versions of resources (Rollback), or change settings.

There is a variation of the Developer role with the name "CLI". In addition to developer permissions, this "Developer CLI" role has the ability to push widgets from external applications, such as the modyo-cli.

# Reviewer

They review the work done by Developers, approving or discarding what is already done and then publish the changes.

Reviewers cannot edit the Site settings.

# Admin

The Admins role has access to all the permissions of the two previous roles, and also has access to the Site settings.

This team member is different from the account-level Default Admin. A site Admin can only configure a site, and cannot make any changes to the platform itself.

If necessary, users from the site who already have existing roles can be deleted. To do this, just click the user and the Delete action.

# Custom redirects

Modyo has a custom redirect system that will allow you to take a URL from your site and automatically redirect it via a 301 or 302 code to another section of the site.

In this view you will find a table with all the redirects that currently exist on the site, where you can search by path or description.

To create a new redirect, click on the New button in the upper right hand corner of the view. By completing the fields URL Source and URL Destination and redirection code and then saving the changes, you will create a new redirection entry.

Warning

The redirect table is the penultimate in precedence, so if there is a URL on the site that points to a page, a default view, or a custom content view, you will see those views instead of being redirected via the custom redirect table.

In addition to creating redirects one by one, you can import a CSV file with up to 1000 redirects.

Warning

The required columns to import redirects are origin y destination.

You can select a 301 or 302 response code for all elements without having to add an additional column.

Also, you should keep in mind that if you are importing a redirect with an origin that has already been registered, you will not be able to start the import process. You will have to modify your CSV file and delete the row whose origin already exists, or delete the custom redirect record of the site whose origin you are trying to import.

The precedence of locations on Modyo sites is as follows:

  1. Default views (Home, search)
  2. Pages
  3. Custom content views
  4. Custom redirects
  5. Site 404 error configuration

# Security headers

Configure HTTP security headers by enabling this module for your site. This action cannot be undone. When enabled, you'll have full control over the headers you want to use.

# HTTP Strict Transport Security (HSTS)

Instructs the browser that your site should be accessed using HTTPS only.

  • Duration: Sets how long the browser should remember that your site is only accessed by using HTTPS.
  • Preload: Include the preload directive. See HSTS Preload List Submission (opens new window) for more details.
  • Include subdomains: Use this HSTS rule for all the site subdomains as well.

# Referrer-Policy

The Referer header contains information about the previous web page that is linked to the resource being requested. You can control how much information should be included in the Referer header with the Referrer-Policy header.

  • no-referrer: No referrer information is sent.
  • no-referrer-when-downgrade: Don't send referrer information to a less secure destination.
  • origin: Send the origin domain only and strip out the paths and query string.
  • origin-when-cross-origin: Send referrer information for same origin requests and strip out the paths and query string to other destinations.
  • same-origin: Send referrer information for same origin requests only.
  • strict-origin: Send the origin domain only for same security level requests, and don't send referrer information to less secure destinations.
  • strict-origin-when-cross-origin: Send referrer information to same-origin requests. Send the origin only to same protocol security level and don't send referrer information to less secure destinations.
  • unsafe-url: Always send referrer information.

# X-Frame-Options

Indicate whether your site can be included in a frame, iframe, embed, or object.

  • DENY: The site cannot be displayed in a frame.
  • SAMEORIGIN: The site can be displayed in frames with the same domain.

# X-Content-Type-Options

It indicates that MIME types announced in the header Content-Type must be followed to avoid MIME type sniffing.

# Content-Security-Policy

Controls what resources the browser can load on the site to mitigate data injection attacks and cross site scripting. The default value of allows you to load resources from anywhere, so it's important to design a content security policy that's right for your site.

Freely specify your content security policy in the text area; for a complete guide on how to write your policy, see MDN Content Security Policy (CSP) (opens new window)

Warning

A very strict value can interfere with features such as Google tag manager, PWA, Widgets, and Asset Manager.

A production-friendly policy must ensure that all assets, such as images and style sheets, are loaded from trusted sources and requires that all scripts be safe and reliable for the application. For example, a strict policy for the minimal template would look like this:

default-src 'self'; img-src 'self' https://cloud.modyocdn.com; font-src 'self' https://cloud.modyocdn.com http://cdn.materialdesignicons.com; style-src 'self' http://cdn.materialdesignicons.com; script-src 'self'

Your policy should include a default-src 'self' directive, which is a fallback for any other resource type. It also needs to include script-src and style-src directives to prevent evaluation of the script and style inline tags.

  • Nonce: A CSP nonce will be added automatically by the server to the script-src and style-src directives if present.

If you have the nonce present in your policy then you can add the script and style tags to the allowed list in your templates using the csp_nonce variable.

<script nonce="{{csp_nonce}}">
  alert("everything will be ok");
</script>

There are several tools to help you design a strong security policy:

# Permissions-Policy

It allows or denies the use of browser features and APIs for the site. For example, you can restrict privacy sensitive APIs, like the camera or microphone, and video autoplay. For a complete list of the features supported by browsers see Feature Policy from MDN (opens new window).

# X-XSS-Protection

It prevents pages from loading when the browser detects a cross-site scripting attack. This protection is not necessary with modern browsers when you implement a strict Content-Security-Policy, but some security inspectors will expect this header to be present.

  • 0: Disable XSS filtering.
  • 1: Enable XSS filtering, removing the unsafe parts.
  • 1; mode=block: Enable XSS filtering, preventing the page rendering.

# Site variables

Modyo has global variables that you can use across multiple sites. However, you can create site-specific variables or override the value of an already created global variable with a specific value for the particular site.

Using variables allows you to reuse HTML, JS, CSS, or text across different sites, widgets, or templates. If you have code that you use repeatedly in different parts of your account, you can assign this value to a variable and thus simplify your processes. When you edit the value of the variable, this will be reflected everywhere the variable is currently used.

። :tip Tip You can use plain text, HTML, JavaScript, and CSS within global variables, however you can't use Liquid code inside them. Please note that content has a maximum of 65,535 characters.

To get the value of the variable anywhere that accepts Liquid markup, use: {{vars.name}} ።:

# Create a variable in sites

To create a variable in sites, follow these steps:

  1. From the main side menu, click on Channels, then select your Site.
  2. Under Site Settings, click Site Variables.
  3. Here you can see the list of all global variables and site variables, their general information, and a button to copy their code into Liquid markup. Click + New Variable.
  4. Fill in theName and Value of the variable.
  5. Click on Save.

። :warning Attention When using variables, variables defined at the lowest level will always be preferred, with variables defined in the widget first, then those defined in the site, and finally variables defined at the account level, so be careful when defining variables in widgets or the site with the same name than account variables. ።: