Platform Usage

<p class="graf graf--p">Guided tours are a powerful feature to help customers discover your product’s value. Guided tours can be configured for segments and specific url (with pattern support) in order to be triggered on specific scenarios, ie: &quot;<i>visitors which that have visited more than 3 times from Australia</i>&quot;.</p><p class="graf graf--p"></p><h2 class="graf graf--h3">Create a tour</h2><figure class="graf graf--figure">
                  <div>
                    <div class="aspectRatioPlaceholder is-locked" style="max-width: 1000px; max-height: 490.6103286384976px;">
                      <div class="aspect-ratio-fill" 
                          style="padding-bottom: 49.06103286384976%;">
                      </div>

                      <img src="/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBMZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--db4182a1ad67e78b6bbc7528d6e648145344a56b/tours-1.png" 
                        class="graf-image" 
                        contenteditable="false"
                      >
                    <div>
                  </div>

                  </div>
                  <figcaption class="imageCaption">
                    <span>
                      <span data-text="true">Tours dashboard</span>
                    </span>
                  </figcaption>
                  </div>
                </figure><p class="graf graf--p">When the tour campaign is created you can configure the site, and specific page, on which the tour will be triggered.</p><p class="graf graf--p"></p><figure class="graf graf--figure">
                  <div>
                    <div class="aspectRatioPlaceholder is-locked" style="max-width: 1000px; max-height: 632px;">
                      <div class="aspect-ratio-fill" 
                          style="padding-bottom: 79.89886219974716%;">
                      </div>

                      <img src="/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBMdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9fce7ee7ec2664ce6bcf918c610ce3e7deac4c2b/image.png" 
                        class="graf-image" 
                        contenteditable="false"
                      >
                    <div>
                  </div>

                  </div>
                  <figcaption class="imageCaption">
                    <span>
                      <span data-text="true">Tour setup</span>
                    </span>
                  </figcaption>
                  </div>
                </figure><p class="graf graf--p">You can configure which segment will receive the Tour on the <b>Audience</b> section</p><p class="graf graf--p"></p><figure class="graf graf--figure">
                  <div>
                    <div class="aspectRatioPlaceholder is-locked" style="max-width: 1000px; max-height: 561.8199802176064px;">
                      <div class="aspect-ratio-fill" 
                          style="padding-bottom: 56.181998021760634%;">
                      </div>

                      <img src="/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBNUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--668fdcfc85661343dd41e9d5f44e0e155ed9a6b3/image.png" 
                        class="graf-image" 
                        contenteditable="false"
                      >
                    <div>
                  </div>

                  </div>
                  <figcaption class="imageCaption">
                    <span>
                      <span data-text="true">Audience configuration</span>
                    </span>
                  </figcaption>
                  </div>
                </figure><p class="graf graf--p"></p><h2 class="graf graf--h3">Compose message</h2><p class="graf graf--p">When the url for the tour is already configured you will be able to compose the tour opening the editor. This editor will open the real site in which you can select portions of the html and set the message. As you select portions of the page the editor will appear to configure the message in each block.</p><p class="graf graf--p"></p><p class="graf graf--p"></p><figure class="graf graf--figure">
                  <div>
                    <div class="aspectRatioPlaceholder is-locked" style="max-width: 1000px; max-height: 473.6318407960199px;">
                      <div class="aspect-ratio-fill" 
                          style="padding-bottom: 47.363184079601986%;">
                      </div>

                      <img src="/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBNdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9cc136aebb70c4105b35ed4ba8549888da05061d/tour-compose.png" 
                        class="graf-image" 
                        contenteditable="false"
                      >
                    <div>
                  </div>

                  </div>
                  <figcaption class="imageCaption">
                    <span>
                      <span data-text="true">composer</span>
                    </span>
                  </figcaption>
                  </div>
                </figure><p class="graf graf--p">When you click on the button indicated in the image the site will open so you can select portions of the page.</p><p class="graf graf--p"><b>Note</b> that Chaskiq integration script (the chaskiq widget) has to be installed on the page in order to the Tour editor work on the opened page</p><p class="graf graf--p"></p><figure class="graf graf--figure">
                  <div>
                    <div class="aspectRatioPlaceholder is-locked" style="max-width: 1000px; max-height: 676.4705882352941px;">
                      <div class="aspect-ratio-fill" 
                          style="padding-bottom: 67.64705882352942%;">
                      </div>

                      <img src="/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBOQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--242e5deabf38b401f464ec527b77eaf345fa70ce/image.png" 
                        class="graf-image" 
                        contenteditable="false"
                      >
                    <div>
                  </div>

                  </div>
                  <figcaption class="imageCaption">
                    <span>
                      <span data-text="true">Opened editor</span>
                    </span>
                  </figcaption>
                  </div>
                </figure><p class="graf graf--p">When you select any of the blocks the Tour message bluble will pop up in order for you to edit the content. You can use all the power of the WYSIWYG editor</p><p class="graf graf--p"></p><figure class="graf graf--figure">
                  <div>
                    <div class="aspectRatioPlaceholder is-locked" style="max-width: 1000px; max-height: 550px;">
                      <div class="aspect-ratio-fill" 
                          style="padding-bottom: 78.45934379457917%;">
                      </div>

                      <img src="/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBOUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--8efe8ebcf19b05916ed0bc9a2a6ba81c9dd9c93c/image.png" 
                        class="graf-image" 
                        contenteditable="false"
                      >
                    <div>
                  </div>

                  </div>
                  <figcaption class="imageCaption">
                    <span>
                      <span data-text="true"></span>
                    </span>
                  </figcaption>
                  </div>
                </figure><p class="graf graf--p">Once you are ready with the message you can press SAVE button and the configured message will be saved.</p><p class="graf graf--p"></p><p class="graf graf--p"></p><p class="graf graf--p"></p><p class="graf graf--p"></p><p class="graf graf--p"></p>

Guided tours are a powerful feature to help customers discover your product’s value. Guided tours can be configured for segments and specific url (with pattern support) in order to be triggered on specific scenarios, ie: "visitors which that have visited more than 3 times from Australia".

When the tour campaign is created you can configure the site, and specific page, on which the tour will be triggered.

You can configure which segment will receive the Tour on the Audience section

When the url for the tour is already configured you will be able to compose the tour opening the editor. This editor will open the real site in which you can select portions of the html and set the message. As you select portions of the page the editor will appear to configure the message in each block.

When you click on the button indicated in the image the site will open so you can select portions of the page.

 that Chaskiq integration script (the chaskiq widget) has to be installed on the page in order to the Tour editor work on the opened page

When you select any of the blocks the Tour message bluble will pop up in order for you to edit the content. You can use all the power of the WYSIWYG editor

Once you are ready with the message you can press SAVE button and the configured message will be saved.

Note that Chaskiq integration script (the chaskiq widget) has to be installed on the page in order to the Tour editor work on the opened page