Updated November 2, 2022.

For installation instructions for v. 3.0, see the README.md. This is an overview using OpenTour v. 3.0 for your projects. It assumes you already have OpenTour v. 3.0 set up on your system or have access to an installation and have a url ready.

If you want to use OpenTour, you can find out more here or read about teaching with the OpenTour app on the ECDS blog and find out how to apply for help in getting your own site.

*NOTE - The URLs for Emory University's official installation of OpenTour Builder have changed:

• FROM: https://opentour.emory.edu/ with https://opentour.emory.edu/tour-site-name for each Tour Site
• TO: https://opentour.site with a subdomain https://tour-site-name.opentour.site for each Tour Site.

All old URLs will continue to work (there will be no interruption in function).

To add a New account to your Tour Site, follow the instructions for "Log in" below and then contact the OpenTour administrator to add Tour Site permissions. YOU must create the account (by logging in once) before the administrator can give it Tour Site access.

LOGIN NOTE: The first time you log in you will see the admin message You have not been added to any tour sites. Please contact an administrator. You can click on 'administrator' for the Readux admin email address. Once you are added to a tour site, you will see your tour site name in this location.

COMMON ISSUE: If you log in and find the above message (You have not been added to any tour sites. Please contact an administrator.) instead of your tour site, when you have had access to a tour site in the past, please first check that you logged in with the correct Gmail/Facebook/Github account. Your OpenTour tour site permissions are tied to the specific email address you use to log in, and if you use a different social media account, you will not be able to access your tour site. OpenTour will add you as a different (new) user!

---

            i. Note: this will also log you into gmail/Facebook/Github/Twitter on this browser. If you go to your mail, google, youtube, etc., you will see that. So, you may want to go log out of gmail after you finish working on the tour (particularly on public computers).
            ii. Note: If you are already logged into Gmail/Facebook/Github/Twitter in the browser that you are using, OpenTour may automatically accept your login without requiring your password a second time, and redirect you automatically to the admin after you choose your account name.

            i. E.g. http://tour-site-name.opentour.site/ will be the URL for tours created in the tour site called “Tour Site Name”.
            ii. The name of your tour site should fit on one line on a mobile phone for best legibility. This will be under 25 characters on most mobile phones and we recommend around 22 characters or shorter.

            i. You can choose the “New Tour” button to create a tour!
            ii. If you already created your tour, click on its name to edit it.
            iii. You can add a unique logo to your tour site, which will show in the top left corner of your tour site in the public view. Just click on 'Upload site logo' and choose an appropriately sized image file.

            i. The “html” tab [</> SOURCE], located next to the PREVIEW tab, allows you to edit the html of your text directly. You do not have to use this, but if you want additional styling of your text, you can use this tab. It allows you to iframe content if needed or minimally change styles. Go to How-To Information for how to use iframes.
            ii. There are also other helpers for bold text, italics, underline, strike-through, lists, and adding external or internal links with the chain/link icon.
            iii. Note: After entering your tour description, add a couple of carriage returns (hit enter a couple of times) to leave some white space after your paragraph-text. This will make reading your tour text easier on a mobile device.

            i. To enter the link, fill out both the "Link Text" - the word or phrase that shows up on the menu - and the "Link Address" - the URL to your website.

            i. First you can choose whether or not you want to enable the map. If not checked, you would create a tour just of scrolling text without geographical references.
            ii. Second, you can separately choose whether to provide Google directions. This is only an option when the map is enabled. If the map is enabled, you still might not want Google directions. Google directions help get your users from stop to stop on your tour. However, if you are creating a tour with stops in broadly distant locations, you may not be expecting users to travel them. Additionally, if you create a tour which is inside of a building, Google directions will not be able to provide useful information. Finally, if you use the new feature to overlay an image or map on top of the Google map (see below), you will likely not need directions.

            i. Just click on Select A File in the gray box, and choose your image.
            ii. Once you have uploaded your image, you will see it over the map on the right. There are four large circles, one at each corner. You can click and drag any of the circles to resize the map or image.

            iii. Tip If you want to have the map display at an angle, you can rotate the map in an external software, such as Photoshop, and save it with a transparent background as a .png file. The transparent sections will show the Google map.
            iv. The map will now also show in any stops that you create in the admin, so that you can position your points over the overlay map.
            v. Tip Keep in mind where the points go on your map, so that you have a border of map around them.

            i. The options are Walking, Bicycling, Driving, and Transit. In many cases you may want to only show users a couple of relevant options, instead of all four. On the front end they will be able to choose between whichever of these four modes you enable. Enable a mode by checking the check-box (square) to its right, under the Enable column.
            ii. In this section you also set the default mode, which shows up without user interaction for all your tour stops. To choose a default mode, check the radio button (circle) to the right of the mode, in the Default column.

            i. Embed media – To add a video or audio clip, you need to link the video from Vimeo or YouTube, or get the embed code from SoundCloud. Add the video’s share link, or SoundCloud clip's audio embed link to the “Add YouTube, Vimeo, on SoundCloud...” line. Once you have pasted or typed in the link, you should see the image of the media below and the button "Yes! Add this Media" below it. Click that button to add the media as a media item to your Tour’s home page. Replace the link if the wrong video or clip appears. If a video or clip does not appear, and the button does not show up, the link is not correct, or the video or audio is hosted on an unsupported platform. See notes and tips below (iv-vii.). NOTE - While you can use the URL for YouTube and Vimeo, you must use the embed code <iframe ...> for SoundCloud.

            ii. Add Images – To add images, go to the section “Drag and drop images onto this area to upload them or Upload an Image” and click “Upload an Image”. Select the image that you want from your computer and click “Save”. Note The images will show full width in a 16:9 image ratio. A 4:3 image will have a white border on two sides. Any sized image can fit, however.

            iii. Reordering media items: Your media will all show up as tiles under “Media Count”. You can click and drag to reorder them. You can include as many images or videos in any order as you want. The will auto-save and renumber their order.
            iv. If you click on the “Edit” button on an image, video, or media item you can enter the “title” that you want to show up under the media item on the public tour page, and the “caption” that you want to show when a user clicks on the image. The caption is a good place to include licensing and copyright information about images.

            v. NOTE - For videos and audio clips from YouTube, Vimeo, and SoundCloud, the title and caption will be imported from the host site. You can edit the text once it has imported to your video or audio clip.
            vi. NOTE - SoundCloud audio will import with the default SoundCloud image. If you want to replace the image with a relevant image file, you can click on 'Edit' under the media item, and 'Replace Image' on the Media metadata page. You can also replace the thumbnails imported from Vimeo or YouTube.
            vii. TIP - If you import a video from Vimeo that is shared by Private link, it may not correctly import the thumbnail. Use the above (vi.) 'Replace Image' button to add a thumbnail.
            viii. Click the ADD OTHER MEDIA button to add images, video, or audio, to your tour that you have already uploaded or embedded on another tour in your tour site. You will get to choose from a list of all media that has already been uploaded.

            i. Note: Some actions, like adding media or reordering media, automatically save the tour. The tour also periodically auto-saves (new in version 3.1). It is always best to click “Save” after any work! Also keep in mind that not clicking “Save” does not mean that your changes have been undone. Always check the public tour page after working.

            i. If you have created a stop already in another tour within your Tour Site, you can click ADD OTHER STOPS to bring a copy or duplicate of the stop to this tour. This may be useful if you are doing multiple tours of a single area, and want to have a few stops overlap. Once you click ADD OTHER STOPS, you will get a list of all the stop in your Tour Site. For each stop, you can choose either to "Add+" the stop to your tour, so that any edits to the stop would show up in all tours, or to "Copy" to the stop to your tour, so that you can make minor adjustments that show up only in this tour.

            i. These function the same as they do on the landing page. The title should be short enough to fit on a mobile phone.
            ii. Note: Make sure the stop name is unique. It also serves as the slug for the URL for the stop, so do not choose “Stop 1” or “Start” if you might use that in another tour.
            iii. The Description field has the same basic text editor. You can use the “html” tab [</> SOURCE] for any iframe or basic style changes that you want to show up on the stop page. Go to How-To Information for how to use iframes.
            iv. Note: It is recommended that you not copy-paste in text directly from Microsoft Word. Word saves its text with complicated style code, which will also be pasted unnecessarily into the page. Try pasting the text that you have written up in Word or Google Docs into a plain text editor and then copy-paste into the tour from there.
            v. While you can include images in the Description field (text editor) through the “html” tab [</> SOURCE] or through pasting from Word, it is recommended that you put images into your stop through the Manage Media portion of the tour stop (see i. below). This section will add the images to the slider at the top of each stop and will size them correctly by default for different viewers.

            i. NOTE: The stop meta description must be less than 500 characters. As this is used for social media posts and search engines, more characters would never show. This also cannot include any styling, just text.

            i. LOCATION NOTE: You MUST enter a location for each tour stop. If you do not enter your own location, the map will default the first stop on a tour to the Latitude/Longitude of the center of Atlanta, subsequent stops will default to the location of the previous stop. This is new in OpenTour 3.1, OpenTour 3.0 centered blank stops at a Lat/Long of 0,0. Keep your stop locations in mind.
            ii. LOCATION NOTE: You MUST have a number on both the latitude and longitude lines for each tour stop (the default with no changes is Latitude/Longitude of 33.75432,-84.38979 – located in the middle of Atlanta). If you delete these numbers, and do not have another latitude and longitude the map will not display. These lines cannot be blank. If you enter an address and click “Locate Address” the lat/long will populate for you. If you adjust the position on the map of your point, the lat/long will adjust automatically.
            iii. Suggestion: If you want to have a stop without a position, enter the same position as you did for the previous stop, and this will allow the user to understand his or her position on the map.

            i. Type in the Stop Address and click “Locate Address.” A point at that address will appear on the preview map, a google map to the right, and the Latitude and Longitude fields below will populate based on the address.
            ii. If you instead know the Latitude and Longitude, you can type the latitude and longitude into these fields directly and then click "Locate Address." A point will appear on the preview map, once both numbers are entered.
            iii. In either case, once the point has appeared on the preview map, you can click the point and drag to adjust its location on the map. This will update BOTH the address AND the Lat/Long.
            iv. Make sure to click "Locate Address" and "Save" on the stop after entering or updating an address or Latitude and Longitude. While it will show the updated address on the preview map, you must click both "Locate Address" and "Save" for the public view to update.
            v. New in 3.1 You can change the color of the map point marker. Click "Icon Color" to choose a different color for the icon of just that stop. If you want to distinguish certain stops from others (for example, still existing historical sites vs. lost sites), you can color all of one type its own color and put an explanation of the color in the tour description.
            vi. New in 3.1 You can also upload a stop pointer icon. If you want to use a custom icon, rather than the standarded stop flag, to mark specific stops, you can click "Upload New Icon". The stop icons need to be smaller than 80 x 80 pixels. If you want to use the same custom stop icon on more than one stop, you can upload it on your first use, and use "Use Existing Map icon" for future stops, where you will be able to choose your icon from a list.

            i. If your stop has a specific location for parking, separate from the stop location itself (that the directions will need to take into account), click on “Add Parking Location”.
            ii. This will open a section with three new fields. Add the address or Latitude and Longitude of the parking location as you did for the stop above.
            iii. After refreshing the page, the parking location can also be edited on the map by clicking and dragging it. It shows as a blue “P” icon on the map.

            i. If your stop has additional verbose directions that you would like to add, this field (with a basic text editor) will allow you to add them. This can include any additional information, such as “walk past the large oak tree” or “turn left at the Big Chicken”. It will show up in a tab under “Directions” next to the tab for turn by turn directions added by google. The tab will not appear if the field is left blank.

            i. The manage media functions the same for stops as it does for the main tour page. You can add videos by YouTube or Vimeo link, audio by SoundCloud embed, or upload image files. You can reorder any image or video by clicking and dragging. You can add media items from other tours in your Tour Site with the "ADD OTHER MEDIA" button.

            i. NOTE: It is always best practice to click the stop and tour "SAVE" buttons. While the tour auto-saves, and the overall tour "SAVE" button should save everything, best practice is to click the stop "SAVE" as well to be sure.

            i. The “html” button [</> SOURCE] will allow for iframes or other unique content and styling.
            ii. The “Link” line will show the public link to this page, for reference.

            i. If you want to include an iframe of an external feature on a stop or page related to your tour stop, you can do so in a page, the main tour page, or in an individual stop by using the html button [</> SOURCE] and pasting in the iframe code.
            ii. The iframe settings must be <iframe src="<Url>"></iframe> with any other specifications you need included. The <Url> is the url to your particular page being iframed. You can include style="width:100%;height:300px;" with any width/height ratio, or width="100%" and height="300px" with any width/height ratio.

            i. If you want to include an interactive timeline of events related to your tour, you can do so in a page, the main tour page, or in an individual stop by using the html button [</> SOURCE] and iframing in a timeline.js tour.
            ii. The iframe settings must be “width=100%” and height=“350px” so that it will load and be visible on a mobile phone screen.
            iii. The “Headline” field needs to have circa 22 characters/letters or less (including spaces), more than that will break lines and make the timeline much less legible.
            iv. The “Text” field is easiest to read with one line of circa 40 characters/letters, but the user can scroll if you want to include more text. In that case you may want to add a warning to the “Stop” or “Page” description field in your OpenTour that the user will need to scroll in the timeline.
            v. The “Media” field in the timeline will show up BELOW the text entered, so will require scrolling by the user. Therefore, using the “Background” field for an image will be cleaner and more legible.
            vi. Use the “html” button [</> SOURCE] in OpenTour to add your iframe to a page or stop. Stops must be saved by the stop’s “Save” button.

Example timeline using ‘background’ field and short text. You can see more on how to create a simple timeline.js timeline at: https://timeline.knightlab.com/

            i. If you want to include an interactive 3d Matterport scan of a stop related to your tour stop, you can do so in a page, the main tour page, or in an individual stop by using the html button [</> SOURCE] and iframing in the Matterport tour link.
            ii. The iframe settings must be <iframe src="<matterport Url>"></iframe> where the <matterport Url> is the url to your particular 3d view.

            i. If you want to include an interactive 360 Theta scan of a stop related to your tour stop, you can do so in a page, the main tour page, or in an individual stop by using the html button [</> SOURCE] and iframing in the Theta embed link.
            ii. The iframe settings must be <iframe src="<Theta embed Url>"></iframe> where the <Theta embed Url> is the url to your particular 360 view.
            ii. To get the embed URL, click the icon with four arrows pointing out, on your Theta 360 post page, below your 360 image. This will bring up a pop-up. The URL of the pop-up is your Theta embed URL.
            iv. The iframe settings will need width and height. Something like “width=100%” and height=“350px” will make it so that it will load and be visible on a mobile phone screen.

            i. If you want to include an audio clip related to your tour stop or tour, you can do so in a page, the main tour page, or in an individual stop by using the html button [</> SOURCE] and iframing in the particular clip from Soundcloud.
            ii. The iframe settings must be <iframe src="<soundcloud Url>"></iframe> where the <soundcloud Url> is the url to your particular audio clip.

            i. To do this, make sure that the phone is set to allow location access for the mobile browser.
            ii. Then go to the Menu of the tour on the top left. Click both toggles to allow the app location access, which should turn them green.
            iii. You will also get a pop-up with this information.

            i. Try including the width and height information for a clear display on desktop and mobile. We recommend “width=100%” and height=“350px” so that it will load and be visible on a mobile phone screen.
            ii. Check out more information on Iframes.

            i. The "Image Title" field imports the image filename or the title of a video from Vimeo or Youtube. OpenTour Builder is designed to ignore image filenames, but it will display the imported title of a video. In some cases you may see an image filename display due to the editing process. In order to fix this, you need to edit the "Image Title" field for that media item.

            ii. Go to the media item (image, video clip, or SoundCloud audio clip) in the media slider in the admin. Click "EDIT" under the image. This will open the edit menu for that media item.

            iii. In that menu, delete the filename or title from the "Image Title" field. If you leave this field blank, the image or video will display with NO gray bar and NO title. You can input any title that you want, and it will display in the gray bar on the mobile and desktop tour.
            iv. Edit the "Image Caption" field to add more information on the image or video that you want to ONLY display if a user clicks on that image or video for more information. This field will not display by default, and can include a description, as well as copyright or licensing information.

            i. Remember, you cannot have two tours with the same name in your Tour Site, and you cannot have two stops with the same name in one Tour. This will cause errors in the URLs, and you will also go to the first of the two (tours or stops). If you are running into this problem, just change the name of one, and it should solve the problem.

            i. OpenTour will save your work automatically as you work. It is also best practice to click 'save' on the Tour Stop and 'save' on the overall Tour at the end of every work session. While OpenTour is saving your work, is not automatically updating any edits entered by anyone else. Because of this, only one person should enter data at a time. If two people enter data (on separate browsers) at once, whichever edits are saved last will show, but the other edits will be overwritten, and not save. If you are working alongside others, you will need to refresh your page before making changes to prevent overwriting their work.