Adding Contact Us to your corporate website

Multimedia Contact Center includes a preconfigured JavaScript file that renders Contact Us in the specified container on a webpage. This can be used to render Contact Us as a standalone webpage, embed Contact Us within a page, or render Contact Us in a pop-up or slider. For more information, see "Adding Contact Us to a webpage".

For integrations with existing webpages, Multimedia Contact Center includes a preconfigured JavaScript slider containing Contact Us that can be added to your webpages. For more information, see "Adding Contact Us with the default slider".

For either resource, you must decide whether you want to host Contact Us’s JavaScript files and CSS files on your corporate web server within the corporate website’s directory or store the files within CCMWa on the Enterprise Server. Files stored within your website’s directory on your corporate web server can be located anywhere within the directory at your discretion.

Note:

Optionally, you can store Contact Us JavaScript and CSS files on your corporate web server within the corporate website’s directory. Files stored within your website’s directory on your corporate web server can be located anywhere within the directory at your discretion. If you store Contact Us files on your corporate web server, you must manually add new fields to the files after every upgrade.

Ensure that you specify the locations in the script reference parameters discussed in "Adding Contact Us to a webpage" and "Adding Contact Us with the default slider".

Adding Contact Us to a webpage

Contact Us can be offered using a script reference. Multimedia Contact Center includes a JavaScript file, MiccContactUs.js, to render Contact Us within an optional target on a webpage. If you want to render Contact Us as a stand-alone webpage, create an empty HTML file and add a reference to this script. For an example of this implementation, see contact.basic.stacked.html or contact.basic.horizontal.html in <drive>:\Program Files (x86)\Mitel\MiContact Center\Support\BasicSamples.

By default, this script uses the default contactus.config.js and ContactUs.css. To use different business lines’ contactus.config.js files or CSS files with MiccContactUs.js, different parameters can be added to the script reference. The following is an example of a MiccContactUs script with all parameters applied to the script reference.

<script

src="ccmwa/scripts/micccontactus.js?embedded=false&target=contactus&vmode=false&csspath=assets/css/&jspath=assets/js/&config= contactus.config "></script>

The following table describes the different parameters

Table 1. MiccContactUs.js parameters
Parameter Name	Parameter Value	Default Value	Parameter Description
embedded	True or False	False	Controls whether or not Contact Us will embed itself in the container specified with the target parameter. If set to True, Contact Us will be embedded in the target. If set to False, Contact Us renders within the body of the page in the upper-left corner.
target	The ID attribute of the target	none	Sets the target in which Contact Us renders. If the target is not present or empty, the Contact Us will render as the last item on the page.
vmode	True or False	True	Controls whether or not Contact Us renders in the standard display or the horizontal display. If set to True, Contact Us renders in the default display. If set to False, Contact Us renders in the horizontal display. Note: vmode overrides the value set in UseVerticalBusinessLinesFirst in contactus.config.js.
csspath	File path	<drive>:\Program Files (x86)\Mitel\MiContact Center\WebSites\Ccmwa\Content\	Path to ContactUs.css. If left blank or excluded, the default ContactUs.css in <drive>:\Program Files (x86)\Mitel\MiContact Center\WebSites\Ccmwa\Content is used.
jspath	Folder path	<drive>:\Program Files (x86)\Mitel\MiContact Center\WebSites\Ccmwa\Scripts\	Path to folder containing contactus.config.js. If left blank or excluded, the default folder will be used.
config	File path	contactus.config.js	Path to the contactus.config.js file to be used with Contact Us. If left blank, the default contactus.config.js file in the folder specified in jspath will be used.

There are various other integration options based on a combination of the parameters used and what kind of container is targeted. For more information, see the basic samples website located in <drive>:\Program Files (x86)\Mitel\MiContact Center\Support\BasicSamples. The following procedure details how to configure Contact Us as a standalone webpage. It assumes that you have:

Added your business lines and queues to a copy of contactus.config.js
Optionally updated the style in ContactUs.css
Placed your JavaScript and CSS files in the desired location on either the Enterprise Server or corporate web server.

To configure Contact Us as a stand-alone webpage

Open the webpage in which you want to render standalone Contact Us with an editor.
Add the following script reference to the Body:
<script src="ccmwa/scripts/micccontactus.js"></script>
If you are using JavaScript and CSS files other than the defaults, update the script reference with parameters indicating the file locations.
For information on MiccContactUs.js parameters, see the above table.
Save and close the text editor.

Adding Contact Us with the default slider

Contact Us can be added to your corporate webpages as a slider using MiCCSideSlider.js. By default, MiccSideSlider.js renders Contact Us as a slider on the right-hand side of your webpage, centered in the viewable area. The default MiccSideSlider can be added to your existing corporate webpage by adding the following script within the body of your webpage.

By default, MiccSideSlider.js uses the default contactus.config.js located at <drive>:\Program Files (x86)\Mitel\MiContact Center\WebSites\Ccmwa\Scripts and the default ContactUs.css located at <drive>:\Program Files (x86)\Mitel\MiContact Center\WebSites\Ccmwa\Content.

To use different business lines’ contactus.config.js files or CSS files with MiccSideSlider, different parameters can be added to the script reference. The following is an example of a MiccSideSlider with all parameters applied to the script reference as guidance for formatting:

The following table describes the different parameters.

Table 2. MiCCSideSlider JavaScript options
Parameter Name	Parameter Value	Default Value	Parameter Description
embedded	True or False	True	Controls whether or not the slider will embed itself in the document in the default right-side, vertically-centered position. If set to True, Contact Us will be embedded in the default location. If set to False, Contact Us will be embedded in the location specified in the target parameter.
target	The ID attribute of the target	contactslider	Sets the target in which Contact Us renders. By default, this value is contactslider. If the target is not present or empty, the slider is created in the center of the viewable area.
vmode	True or False	True	Controls whether or not Contact Us renders in the standard display or the horizontal display. If set to True, Contact Us renders in the standard display. If set to False, Contact Us renders in the horizontal display. Note: vmode overrides the setting of UseVerticalBusinessLinesFirst in contactus.config.js
csspath	File path	<drive>:\Program Files (x86)\Mitel\MiContact Center\WebSites\Ccmwa\Content\	Path to ContactUs.css. If left blank or excluded, the default ContactUs.css in <drive>:\Program Files (x86)\Mitel\MiContact Center\WebSites\Ccmwa\Content is used.
imgpath	Folder path	<drive>:\Program Files (x86)\Mitel\MiContact Center\WebSites\Ccmwa\Content\images	Path to where slider button images are stored on your corporate web server. If left blank or excluded, the default images on the Enterprise from <drive>:\Program Files (x86)\Mitel\MiContact Center\WebSites\Ccmwa\Content\images\ will be used. For more information on custom images, see "Adding custom images".
imgmod	suffix	Blank	Text to append to the end of the standard image name used for the slider in/out images so you can implement custom versions. Images must be .png files. For more information on custom images, see "Adding custom images".
jspath	File path	<drive>:\Program Files (x86)\Mitel\MiContact Center\WebSites\Ccmwa\Scripts\	Path to folder containing contactus.config.js. If left blank or excluded, the default folder will be used.
config	File path	<drive>:\Program Files (x86)\Mitel\MiContact Center\WebSites\Ccmwa\Scripts\contactus.config.js	The file path to the contactus.config.js file to be used with Contact Us. If left blank, the default contactus.config.js file in the folder specified in jspath will be used.
promptafter	Number in milliseconds	0	The amount of time before the slider automatically slides out. If set to 0 or omitted, the slider will not automatically slide out.

The following procedure assumes you have already added your business lines and queues to a copy of contactus.config.js, optionally updated the style in ContactUs.css, and placed your JavaScript and CSS files in the desired location.

To add the slider to an existing webpage

Open the webpage you are adding the slider to in an HTML editor.
Add the following script reference in the body of the webpage:
<script src="ccmwa/scripts/miccsideslider.js"></script>
If you are using JavaScript and CSS files other than the default, update the script references with parameters indicating the file locations.
For information on MiccContactUs.js parameters, see the above table.
Save and close the HTML editor.

Adding custom images

MiccSideSlider can use custom images, either through replacing the default images on the Enterprise Server or by using parameters on the JavaScript call to MiccSideSlider.js to instruct us different images. The following images can be customize with MiccSideSlider.js:

Contact_Us_Slider_Expand.png
Contact_Us_Slider_Minimize.png

Custom images must have the same name as the original images or else have the same name with the imgmod suffix applied. Custom images must be stored in the same folder.